关于微信小程序开发的几点总结

随着公司业务的发展需要，很多项目都设计了配套的微信小程序，本文对微信微信小程序做一个小小的总结，为自己在开发过程遇到问题的解决方案及理解，希望对初涉微信小程序的你有所帮助，如若路过的大佬有更好的方法或见解，欢迎留言讨论学习。文中所有示例代码均通过微信开发者工具实现。

关于微信小程序开发前的准备工作

1、申请微信小程序

在开发一个微信小程序之前，首先要在微信公众平台注册一个小程序，注册页面如下所示：

使用注册的邮箱（即账号）、密码登录微信公众平台，进入小程序后台管理平台，“开发->开发管理->开发设置”，查看AppID并生成AppSecret，记录AppID、AppSecret。

• 前端开发利用微信开发者工具创建小程序项目时，需要填入AppId，如果使用测试AppID，有些功能会受限，而且无法上传代码。
• 后端开发需要使用前端传的用户身份标识code、AppID、AppSecret，请求微信服务器获得OpenId，建立小程序的用户体系（见微信小程序登录）

2、完善微信小程序

对于新注册的微信小程序只有AppID，其他基本信息需要登录微信公众平台，在首页进行完善。在微信小程序提交审核之前，必须将微信小程序的基本信息完善好，否则，无法提交审核。这里需要注意，小程序基本信息也有填写规范，提交之后也需要审核。

3、微信小程序成员管理

微信小程序需要在微信公众平台的"管理 -> 成员管理 -> 所有成员"页面进行添加, 成员分为三种：

• 管理员：一个小程序只有一个，支持修改
• 项目成员：最多能添加60个项目成员，除了管理员之外的成员添加项目成员需要管理员扫码确认，对于添加好的项目成员，只能修改备注名，不支持修改。项目成员具有体验权限。
• 体验人员：最多能添加60个体验成员，除了管理员之外的成员添加体验成员不需要管理员确认，支持删除，体验成员只能扫体验码体验小程序，没有扫开发码体验小程序的权限。

3、微信小程序域名

微信小程序只支持https请求，需要在微信公众平台“开发->开发管理->开发设置”页面配置域名，主要配置服务器域名，包括request合法域名、socket合法域名、uploadFile合法域名、downloadFile合法域名，如果有利用webview内嵌H5的需求，还需要配置业务域名。

域名也需要在小程序提交审核之前配置，后台部署好之后，小程序开发者在提交正式版小程序之前，需要将请求地址切换到配置的域名，并打开微信开发者工具的“详情 -> 本地设置” 的域名校验开关，进行https域名的测试。

关于微信小程序静态页面

1、静态页面尺寸

微信小程序对CSS做了扩展,支持rpx,可以根据屏幕宽度进行自适应。

设备	rpx换算px(屏幕宽度/750)	px换算rpx(750/屏幕宽度)
iPhone5	1rpx = 0.42px	1px = 2.34rpx
iPhone6	1rpx = 0.5px	1px = 2rpx
iPhone6 Plus	1rpx = 0.552px	1px = 1.81rpx

通常情况下UI的设计稿是以iPhone6 即1334 * 750为准，在 iPhone6 上，屏幕宽度为375px，共有750个物理像素，则750rpx= 375px= 750物理像素，1rpx = 0.5px = 1物理像素。所以开发静态页面时，将微信开发者工具的模拟器选择为 iPhone6/7/8, 以rpx为单位，直接使用设计稿尺寸大小。

例如设计稿上一个宽高均为100，边距为30，边框为1的元素，那它的wxss样式：

说明：以上数据通过Mark Man测量；
Mark Man有体验版和正式版，免费版提供颜色标记、长度标记、长度/范围标记以及文本标记，体验版的功能就满足开发着的日常给工作使用

.container {
   
  height: 100rpx;
  width: 100rpx;
  margin: 30rpx;
  padding: 30rpx;
  border: 1px solid rgba(0, 0, 0, .7);
}

以上样式在iPhone6上会和设计稿保持一致，其他型号的设备会根据屏幕宽度自动缩放。

但对于比较小的尺寸，使用px为单位，如1像素的边框，border-top:1px;

2、页面字体大小

页面字体大小需要根据项目需求确定，如果要求字体自适应设备，需要使用rpx作为单位，如果要固定大小，则使用px。

3、静态页面布局

实现同一种页面样式布局的方式有很多种，这里推荐使用Flex 布局，可以简便地实现各种页面布局，更重要的是通过它实现的页面布局是响应式的。目前，它已经得到了所有浏览器及设备的支持，可以减小由于兼容性导致的页面异常。

4、公众页面样式

对于设计稿中的一些公众样式，如颜色、字体、按钮样式、列表等，最好能提取出来，放入公众样式表app.wxss中，在设计有变化时能快捷方便的修改。

关于微信小程序页面路由

微信小程序的页面路由由小程序框架自己管理，需要在app.json文件通过pages字段全局注册,小程序的默认首页是pages的第一项，目前支持通过entryPagePath设置，如下所示：

这里的页面注册有一个快捷方法：在项目根目录的pages下“新建文件夹”，创建页面文件目录，然后在新创建的目录下“新建Page”，框架会自动生成与Page名称一致的.wxml、.wxss、.json、.js文件，并把此Page目录自动添加到app.json的pages中。这种方法可以有效避免忘注册页面导致的异常。

//app.json
{
   
  "entryPagePath": "pages/logs/index",
  "pages": [
     "pages/index/index",
     "pages/logs/index"
  ],
}

页面路由跳转可通过使用API或组件navigator实现，这里需要注意以下几点：

• switchTab只能打开tabBar页面
• reLaunch