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