微信小程序开发流程介绍

8,193 阅读7分钟

1&:起步

一、申请账号: 点击 mp.weixin.qq.com/wxopen/ware… 根据指引填写信息和提交相应的资料,就可以拥有自己的小程序帐号。 登录 mp.weixin.qq.com ,我们可以在菜单 “设置”-“开发设置” 看到小程序的 AppID 了 。

二、安装开发工具: 前往 开发者工具下载页面 ,根据自己的操作系统下载对应的安装包进行安装,有关开发者工具更详细的介绍可以查看 《开发者工具介绍》 。

三、创建第一个小程序: 新建项目选择小程序项目,选择代码存放的硬盘路径,填入刚刚申请到的小程序的 AppID,给你的项目起一个好听的名字,最后,勾选 "创建 QuickStart 项目" (注意: 你要选择一个空的目录才会有这个选项),点击确定,你就得到了你的第一个小程序了,点击顶部菜单编译就可以在 IDE 预览你的第一个小程序。

四、编译预览: 点击工具上的编译按钮,可以在工具的左侧模拟器界面看到这个小程序的表现,也可以点击预览按钮,通过微信的扫一扫在手机上体验你的第一个小程序。

2&:代码构成

一、JSON配置: 【1】小程序配置 app.json app.json 是对当前小程序的全局配置,包括了小程序的所有页面路径、界面表现、网络超时时间、底部 tab 等。

【2】工具配置 project.config.json 针对各自喜好做一些个性化配置,例如界面颜色、编译配置等等,当你换了另外一台电脑重新安装工具的时候,你还要重新配置。

【3】页面配置 page.json  page.json 其实用来表示 pages/logs 目录下的 logs.json 这类和小程序页面相关的配置。

二、WXML模板: 从事过网页编程的人知道,网页编程采用的是 HTML + CSS + JS 这样的组合,其中 HTML 是用来描述当前这个页面的结构,CSS 用来描述页面的样子,JS 通常是用来处理这个页面和用户的交互。同样道理,在小程序中也有同样的角色,其中 WXML 充当的就是类似 HTML 的角色。

三、WXSS样式: WXSS 具有 CSS 大部分的特性,小程序在 WXSS 也做了一些扩充和修改。

四、JS交互逻辑: 一个服务仅仅只有界面展示是不够的,还需要和用户做交互:响应用户的点击、获取用户的位置等等。在小程序里边,我们就通过编写 JS 脚本文件来处理用户的操作。

3&:小程序逻辑

一、小程序的启动: 微信客户端在打开小程序之前,会把整个小程序的代码包下载到本地。这个配置说明在 QuickStart 项目定义了两个页面,分别位于 pages/index/index 和 pages/logs/logs 目录。而写在 pages 字段的第一个页面就是这个小程序的首页(打开小程序看到的第一个页面)。于是微信客户端就把首页的代码装载进来,通过小程序底层的一些机制,就可以渲染出这个首页。整个小程序只有一个 App 实例,是全部页面共享的,更多的事件回调参考文档 注册程序 App 。

二、小程序的页面: Page 是一个页面构造器,这个构造器就生成了一个页面。在生成页面的时候,小程序框架会把 data 数据和 index.wxml 一起渲染出最终的结构,于是就得到了你看到的小程序的样子。在渲染完界面之后,页面实例就会收到一个 onLoad 的回调,你可以在这个回调处理你的逻辑。

三、组件: 小程序提供了丰富的基础组件给开发者,开发者可以像搭积木一样,组合各种组件拼合成自己的小程序。

四、API: 为了让开发者可以很方便的调起微信提供的能力,例如获取用户信息、微信支付等等,小程序提供了很多 API 给开发者去使用。

4&:发布前的准备

一、用户身份: 一个团队进行小程序的开发,那么团队成员的身份管理是很有必要的。管理员可在小程序管理后台统一管理项目成员(包括开发者、体验者及其他成员)、设置项目成员的权限,包括:开发者/体验者权限、登录小程序管理后台、开发管理、查看小程序数据分析等。 管理入口位于:小程序管理后台 - 用户身份 – 成员管理

二、预览: 使用开发工具可以预览小程序,帮助开发者检查小程序在移动客户端上的真实表现。点击开发者工具顶部操作栏的预览按钮,开发工具会自动打包当前项目,并上传小程序代码至微信的服务器,成功之后会在界面上显示一个二维码。使用当前小程序开发者的微信扫码即可看到小程序在手机客户端上的真实表现。

四、上传代码: 同预览不同,上传代码是用于提交体验或者审核使用的。点击开发者工具顶部操作栏的上传按钮,填写版本号以及项目备注,需要注意的是,这里版本号以及项目备注是为了方便管理员检查版本使用的,开发者可以根据自己的实际要求来填写这两个字段。 上传成功之后,登录小程序管理后台 - 开发管理 - 开发版本 就可以找到刚提交上传的版本了。可以将这个版本设置 体验版 或者是 提交审核。

五、小程序的版本: 开发版本:使用开发者工具,可将代码上传到开发版本中。 开发版本只保留每人最新的一份上传的代码。点击提交审核,可将代码提交审核。开发版本可删除,不影响线上版本和审核中版本的代码。 审核中版本:只能有一份代码处于审核中。有审核结果后可以发布到线上,也可直接重新提交审核,覆盖原审核版本。 线上版本:线上所有用户使用的代码版本,该版本代码在新版本代码发布后被覆盖更新。

5&:上线

一、提交审核: 为了保证小程序的质量,以及符合相关的规范,小程序的发布是需要经过审核的。在开发者工具中上传了小程序代码之后,登录 小程序管理后台 - 开发管理 - 开发版本 找到提交上传的版本。在开发版本的列表中,点击 提交审核 按照页面提示,填写相关的信息,即可以将小程序提交审核。需要注意的是,请开发者严格测试了版本之后,再提交审核, 过多的审核不通过,可能会影响后续的时间。

二、发布: 审核通过之后,管理员的微信中会收到小程序通过审核的通知,此时登录 小程序管理后台 - 开发管理 - 审核版本。中可以看到通过审核的版本。请点击发布,既可发布小程序。

三、运营数据: 有两种方式可以方便的看到小程序的 运营数据: 方法一:登录 小程序管理后台 - 数据分析,点击相应的 tab 可以看到相关的数据。 方法二:使用小程序数据助手,在微信中方便的查看运营数据