小程序开发中的各种坑, 进行简要总结, 欢迎填坑 `
优化代码包
尽量减少代码包的大小, 因为代码包大小直接影响到下载速度, 从而影响用户的首次打开体验. 2M 限制.
小程序代码包经过编译后, 会放在微信的 CDN 上供用户下载, CDN 开启了 GZIP 压缩, 多数图片格式大大降低代码包压缩率.
使用云服务器存储图片, 使用字体图标
调起微信开发者工具 wechatide://minicode/eJwL4bmd6mY3
1. 小程序字体
换行符也可写在 JS 参数 data, 注意 n 空格转义字符 必须在标签内转义字符解码属性 decode 设置 true,decode 可以解析的有 <> & '
2. 提交表单
用
来获取参数, 元素标签需要加属性 name="my-name" 才可以获取到
- formSubmit: function (e) {
- console.log('form 发生了 submit 事件, 携带数据为:', e.detail.value)
- }
3. 去掉按钮边框线 button:after {border-width: 0;}
4. 路径页面传参, 新页面 onLoad 页面加载 options 接收参数
<navigator url="/navigator/navigator?title=1&&idx=one"></navigator>
index.JS
- Page({
- data:{
- },
- onLoad:function(options){
- // 生命周期函数 -- 监听页面加载
- this.setData({
- title: options.title,
- idx : options.idx
- })
- }
- })
5. 选择框自定义样式
- radio .wx-radio-input{
- width: 60rpx;
- height: 60rpx;
- border-radius: 4rpx;
- }
- radio .wx-radio-input-checked {
- background: #fff;
- }
- radio .wx-radio-input.wx-radio-input-checked::before{
- width: 60rpx;
- height: 60rpx;
- line-height: 60rpx;
- text-align: center;
- color: #fff;
- border: 1rpx solid #efa100;
- border-radius: 4rpx;
- background-color: #efa100;
- transform: translate(-50%, -50%) scale(1);
- }
- checkbox .wx-checkbox-input{
- width: 60rpx;
- height: 60rpx;
- border-radius: 4rpx;
- }
- checkbox .wx-checkbox-input-checked {
- background: #fff;
- }
- checkbox .wx-checkbox-input.wx-checkbox-input-checked::before{
- width: 60rpx;
- height: 60rpx;
- line-height: 60rpx;
- text-align: center;
- color: #fff;
- border: 1rpx solid #efa100;
- border-radius: 4rpx;
- background-color: #efa100;
- transform: translate(-50%, -50%) scale(1);
- }
6. 使用字体图标 iconfont
http://iconfont.cn/ 下载字体图标
把. ttf 格式的字体文件转换为 base64
https://transfonter.org/
把转换后 CSS 文件中的 @font-face 部分替换掉, 放入. wxss 文件
只需要引用 iconfont.wxss 就可以了
<text class="iconfont icon-user"></text>
7. 页面栈
wx.navigateTo 最多 5 层, 超出不入栈, 无法打开页面, 只能使用 redirectTo 代替或者传参, 小程序不提供返回按钮监听, 灵活运用
Android 实测
初始化
a 页面入栈
(a-navigateTo-b)
b 页面出栈
(b-redirectTo-c)
c 页面出栈
(c-redirectTo-d)
d 页面入栈
(d-navigateTo-e)
e 页面
e 页面返回 d 页面
d 页面返回 a 页面
8. 网络请求
- wx.request({
- url: App.medinApi.domain + App.medinApi.register,
- header: {
- "Content-Type": "application/x-www-form-urlencoded"
- },
- method: 'POST',
- data : {
- 'phone': e.detail.value.phone,
- 'code': e.detail.value.validate,
- 'openid': App.globalData.openid
- },
- success : function(res) {
- if (res.data.status == 1) {
- wx.showToast({
- title: '登录成功',
- icon: 'success',
- duration: 2000
- })
- var jumper = setTimeout(function(){
- wx.navigateTo({
- url: '/pages/index/index'
- });
- },2000);
- } else {
- console.log(res);
- wx.showToast({
- title: res.data.msg,
- icon: 'none',
- duration: 2000
- })
- }
- },
- fail: function(res) {
- console.log(res);
- }
- });
9.z-index 层级失效问题, 必须两个组件都设置 position 属性, 才会生效
10. 解决首页先 onLoad 再 onLaunch 的问题
正常顺序 onLaunch 执行完了再 onLoad, 然而并不是, 由于是网络请求, 可能会在 onLoad 之后才返回.
根据实际应用场景需要先 onLaunch 获得参数, 用回调函数来解决
App.JS
- onLaunch: function(){
- var me = this;
- wx.request({
- success: function(){
- // 回调函数, 优先执行 onLaunch
- me.globalData.employId = '1';
- if (me.employIdCallback){
- me.employIdCallback('1');
- }
- }
- })
- }
index.JS
- var App = getApp();
- onLoad: function(){
- if (App.globalData.employId && App.globalData.employId != '') {
- wx.redirectTo({
- url: '/pages/register/index'
- })
- }else{
- if (employId != '') {
- wx.redirectTo({
- url: '/pages/register/index'
- })
- }
- }
- }
- App[onLaunch] -> index[onLoad] -> App[onLaunch]
来源: https://yq.aliyun.com/articles/667352