小知识，大挑战！本文正在参与“程序员必备小知识”创作活动。
引言
小程序是一种全新的连接用户与服务的方式，它可以在微信内被便捷地获取和传播，同时具有出色的使用体验
I、 小程序简介
1.1 小程序技术发展史
小程序的主要开发语言是 JavaScript ,当微信中的 WebView 逐渐成为移动 Web 的一个重要入口时，微信就有相关的 JS API 了。此类 API 最初是提供给腾讯内部一些业务使用，2015年初，微信发布了一整套网页开发工具包，称之为 JS-SDK，开放了拍摄、录音、语音识别、二维码、地图、支付、分享、卡券等几十个API。
WeixinJSBridge.invoke('imagePreview', {
current: 'http://inews.gtimg.com/newsapp_bt/0/1693121381/641',
urls: [ // 所有图片的URL列表，数组格式
'https://img1.gtimg.com/10/1048/104857/10485731_980x1200_0.jpg',
'https://img1.gtimg.com/10/1048/104857/10485726_980x1200_0.jpg',
'https://img1.gtimg.com/10/1048/104857/10485729_980x1200_0.jpg'
]
}, function(res) {
console.log(res.err_msg)
})
JS-SDK是对之前的 WeixinJSBridge 的一个包装，以及新能力的释放，并且由对内开放转为了对所有开发者开放，绝大部分在微信内传播的移动网页都使用到了相关的接口。
JS-SDK 的增强版本，其中有一个重要的功能，称之为“微信 Web 资源离线存储”。
微信 Web 资源离线存储是面向 Web 开发者提供的基于微信内的 Web 加速方案。
通过使用微信离线存储，Web 开发者可借助微信提供的资源存储能力，直接从微信本地加载 Web 资源而不需要再从服务端拉取，从而减少网页加载时间，为微信用户提供更优质的网页浏览体验。每个公众号下所有 Web App 累计最多可缓存 5M 的资源。
1.2 小程序与普通网页开发的区别
- 逻辑层和渲染层
网页开发渲染线程和脚本线程是互斥的，这也是为什么长时间的脚本运行可能会导致页面失去响应，而在小程序中，二者是分开的，分别运行在不同的线程中。网页开发者可以使用到各种浏览器暴露出来的 DOM API，进行 DOM 选中和操作。
小程序的逻辑层和渲染层是分开的，逻辑层运行在 JSCore 中，并没有一个完整浏览器对象，因而缺少相关的DOM API和BOM API。这一区别导致了前端开发非常熟悉的一些库，例如 jQuery、 Zepto 等，在小程序中是无法运行的。同时 JSCore 的环境同 NodeJS 环境也是不尽相同，所以一些 NPM 的包在小程序中也是无法运行的。
- 面对的运行环境
网页开发者需要面对的环境是各式各样的浏览器，PC 端需要面对 IE、Chrome、QQ浏览器等，在移动端需要面对Safari、Chrome以及 iOS、Android 系统中的各式 WebView 。
而小程序开发过程中需要面对的是两大操作系统 iOS 和 Android 的微信客户端，以及用于辅助开发的小程序开发者工具，小程序中三大运行环境也是有所区别的，如下表1-1所示
| 运行环境 | 逻辑层 | 渲染层 |
|---|---|---|
| iOS | JavaScriptCore | WKWebView |
| 安卓 | V8 | chromium定制内核 |
| 小程序开发者工具 | NWJS | Chrome WebView |
iOS安全之UIWebView 被拒的解决方案：用更安全的WKWebView替代UIWebView
II 、准备工作
2.1 注册微信小程序，获取小程序的 AppID
推荐通过已有公众号快速关联注册小程序，在开发设置页面查看AppID和AppSecret
- 注册完小程序之后，一定要记住原始ID ，这个可以用于找回密码等功能。
- 注册的时候，如果遇到QQ邮箱被占用是，可以给QQ邮箱设置别名，比如我的英文qq邮箱 iosre@qq.com
2.2 开发工具
下载开发者工具进行代码的开发和上传
微信开发者工具有三大模块。
- 小程序模拟器
- 小程序编辑器
- 小程序调试器:功能类似浏览器里页面的审查元素，我们在元素调式框里修改属性，可以查看到页面相关属性的变化， 调试器分为 6 大功能模块：Wxml、Console、Sources、Network、Appdata、Storage。
2.3 小程序管理后台的基本操作
kunnan.blog.csdn.net/article/det…
2.4 小程序代码构成
- .json 后缀的 JSON 配置文件,在小程序中，扮演的静态配置角色
- .wxml 后缀的 WXML 模板文件，类似 HTML 的角色。
- .wxss 后缀的 WXSS 样式文件，具有 CSS 大部分的特性，小程序在 WXSS 也做了一些扩充和修改。
- .js 后缀的 JS 脚本逻辑文件，用于编写脚本与用户交互，响应用户的点击事件
JSON 配置文件:
app.json 是当前小程序的全局配置，包括了小程序的所有页面路径、界面表现、网络超时时间、底部 tab 等
底部 tab
"tabBar": {
"color": "#7A7E83",
"selectedColor": "#3cc51f",
"borderStyle": "black",
"backgroundColor": "#F7F7F7",
"list": [
{
"pagePath": "pages/index/index",
"iconPath": "images/icon_tab_wode_n@2x.png",
"selectedIconPath": "images/icon_tab_wode_s@2x.png",
"text": "首页"
},
{
"pagePath": "pages/getOpenId/index",
"iconPath": "images/icon_tab_wode_n@2x.png",
"selectedIconPath": "images/icon_tab_wode_s@2x.png",
"text": "分类"
},
{
"pagePath": "pages/getMiniProgramCode/index",
"iconPath": "images/icon_tab_wode_n@2x.png",
"selectedIconPath": "images/icon_tab_wode_s@2x.png",
"text": "接口"
},
{
"pagePath": "pages/deployService/index",
"iconPath": "images/icon_tab_wode_n@2x.png",
"selectedIconPath": "images/icon_tab_wode_s@2x.png",
"text": "关于"
}
]
},
2.5 路由跳转
2.6 扩展能力（搜索）
搜索组件Searchbar提供搜索的功能，并展示搜索的结果
developers.weixin.qq.com/miniprogram…
III、 目录结构
3.1 项目目录结构
| 文件 | 必需 | 作用 |
|---|---|---|
| app.js | 是 | 小程序逻辑 |
| app.json | 是 | 小程序公共配置 |
| app.wxss | 否 | 小程序公共样式表 |
├── /cloudfunctions/ # 云函数
├── /miniprogram/ # 前端代码
│ ├── /images/ # 图片等资源
│ ├── /pages/ # 页面目录
│ ├── /app.js # 全局配置
│ ├── /app.json # 全局配置
│ ├── /app.wxss # 全局样式文件
├── /project.config.json # 项目配置文件
一个小程序页面由四个文件组成，分别是：
| 文件类型 | 必需 | 作用 |
|---|---|---|
| js | 是 | 页面逻辑 |
| wxml | 是 | 页面结构 |
| json | 否 | 页面配置 |
| wxss | 否 | 页面样式表 |
3.2 云函数目录
cloudfunctions //云函数目录
├── config.json //权限和定时触发器等的配置文件
├── index.js //云函数
├── package.json //云函数的依赖管理
see also
更多内容请关注#小程序：iOS逆向,只为你呈现有价值的信息，专注于移动端技术研究领域。
