Fork me on GitHub

小程序入坑指南

微信小程序跳坑指南

微信小程序越来越火了,最近因为做一个营销活动需要用到小程序形势,所以就安排了一波小程序。其中痛苦并快乐着,为了造福大家,避免大家重复走我走过的坑,现在决定把这套《降龙十八掌》免费传授给各位有缘人。𓀀𓀁𓀂𓀃𓀄𓀅𓀆𓀇𓀈𓀉𓀊𓀋𓀌𓀍𓀎𓀏𓀐𓀑𓀒𓀓𓀔𓀕𓀖𓀗𓀘𓀙𓀚𓀛𓀜

debug模式

在小程序开发过程中,很多请求域名需要配置,小程序默认是请求不了外部的接口,图片资源等。这时候,我们可以选择在开发工具上右上角点击详情,然后再下面勾选不校验安全域名、TLS版本以及HTTPS证书,这样我在开发阶段我们就不需要配置域名,如下图。
wxapp

但是如果我们想要在手机上预览的话,这样还是调不通这些请求,这时候,有两种解决方法。
第一种:手动在手机小程序中,点击右上角菜单栏选择,打开调试模式,重新就如小程序,这样就可以调通接口了,这方法有点麻烦。
第二种:我们可以在小程序的配置文件app.json中,添加debug属性,在开发的时候,属性值设为true,生产时,设置为false。
最后要谨记,生产版本,域名一定一定要配置好,不然是请求不通的。
wxapp

wx.request请求

request请求无论是404,或500的状态码,都会跳进success方法里面,不会跳到fail方法,可以在success方法里面根据statusCode 判断请求结果,当statusCode ==200时,请求成功
wxapp

图片下载

图片下载不能使用本地图片,需要使用远程图片
wxapp
这时候的url不能是本地相对路径的图片,例如(“/pages/images/a.jpg”),只能是远程图片例如(’https://img2.mama100.com/site/mobile/img/swisse-wxapp/21Days/images/code.png',)

图片自适应

.图片大小不能自适应例如(style=”width:100%,height:auto;”)height:auto不生效,应该使用mode=”widthFix”属性,() 这时候,这需要设置图片的宽度,高度会自适应(style=”width:100px;”)

wx.showLoading

使用wx.showLoading提示时,title只能在ios上只能显示7个字,用wx.showModal 代替
wxapp

在ios某些机型上,。wxml文件不支持三元表达式写法,只能在js文件处理

formId

保存formId,(给用户推送小程序信息的时候,需要用户主动生成formId),formId生成方法如下:
.wmxl文件
wxapp
js文件
wxapp

页面数量

小程序只能保存最多内存能保存5个页面,跳转页面时,内存超过5个页面,可以选择wx.redirectTo,或wx.reLaunch销毁之前内存页面,从而释放内存

下载动态页面

下载动态页面时,例如下载首页打call页面,这时候就需要选择canvas了,小程序也有提供一套canvasAPI来操作。流程是
(1)、使用canvas描绘页面元素
(2)、使用wx.canvasToTempFilePath方法,把canvas转成临时图片,保留到内存
(3)、使用wx.saveImageToPhotosAlbum方法,把图片保存至手机相册

分享

(1).页面button,open-type=”share”,比如
btn open-type=”share”邀请好友参团
(2).页面右上角自带的转发
二者统一调用的都是js定义的onShareAppMessage的方法,可以通过参数的from属性判断来源
wxapp

嵌H5网页

wxapp

授权按钮

用户拒绝授权后,重新调起授权方法
.wmxl文件
wxapp
js 文件
wxapp

this指向问题

this指针问题,我们在小程序中,会经使用到this去调用Page对象的方法或属性,
这时候,在闭包函数里面调用的话,会出现闭包问题,这是this的指向可能就不是Page对象了,解决方法有两个,第一个是在外层定义一个that变量,指向Page对象,闭包函数内部,使用that变量
wxapp
第二个使用箭头函数,让this变量指向Page对象
wxapp

sessionID,openId

小程序在开始页面的时候,会请求后台,生产sessionID,openId,通过wx.setStorageSync(‘sessionId’, sessionId)方法保存到本地存储,这样,我们在其他的页面就可以在本地存储中获取它的值。小程序在解密微信运动步数的时候,需要提供sessionID,但sessionID是有效期的,它的有效期有后台控制(我们后台设置的是2小时有效期),当过期的时候,我们就需要重新获取sessionID。具体代码如下:
wxapp
wxapp