小程序常见问题

Grid 布局

ios 测试没问题,android 测试不支持。官方来解答一下,三端的脚本执行环境以及用于渲染非原生组件的环境是各不相同的:

  • 在 iOS 上,小程序逻辑层的 javascript 代码运行在 JavaScriptCore 中,视图层是由 WKWebView 来渲染的,环境有 iOS8、iOS9、iOS10;

  • 在 Android 上,

    • 旧版本,小程序逻辑层的 javascript 代码运行中 X5 JSCore 中,视图层是由 X5 基于 Mobile Chrome 53/57 内核来渲染的;
    • 新版本,小程序逻辑层的 javascript 代码运行在 V8 中,视图层是由自研 XWeb 引擎基于 Mobile Chrome 53 内核来渲染的;
  • 在 开发工具上,小程序逻辑层的 javascript 代码是运行在 NW.js 中,视图层是由 Chromium 60 Webview 来渲染的。

LocalStorage 本地存储

每个微信小程序都可以有自己的本地缓存,可以通过 wx.setStoragewx.setStorageSyncwx.getStoragewx.getStorageSyncwx.clearStoragewx.clearStorageSync 可以对本地缓存进行设置、获取和清理。同一个微信用户,同一个小程序 storage 上限为 10MB。localStorage 以用户维度隔离,同一台设备上,A 用户无法读取到 B 用户的数据。其中 localStorage 是持久存储的,但是我们不建议将关键信息全部存在 localStorage,以防用户换设备的情况。

关于 setData

  1. 参数接受一个对象,以 key,value 的形式表示;
  2. 参数和变量名称一致,可用一个值代替(es6新语法特性)
  3. 可以设置一个或多个data数据
  4. key 可以以数据路径的形式给出(路径形式的key必须带引号)
  5. key 值可以为变量,为变量的时候要用[]引起来
  6. 直接修改 this.data,虽然会改变数据,但是页面不会重新渲染,无法改变页面状态,会造成数据不一致的情况
  7. 单次设置的数据不能超过1024KB,请尽量避免一次设置过多的数据
  8. 不需要在 this.data 中预先定义,使用 setData() 方法会自动创建该数据

关于转发

微信小程序的页面 js 文件里有分享函数 onShareAppMessage,触发方式有两种,一种时点击小程序右上角的按钮,在底部出现的菜单中选择转发;另外一种使用button实现,设置open-type=”share”。那么携带参数的事情就交给他们来处理了,比如我们要在转发中插入我们自己的用户id,可以这样设置,在path要转发的页面后面拼接自己要传的参。

1
2
3
4
5
6
7
8
9
10
11
12
onShareAppMessage: function () {
const that = this
const userId = that.data.userId
return {
title: '我的分享',
path: '/pages/index/index?userId=' + userId, //这里拼接需要携带的参数
imageUrl: 'https://ceshi.guirenpu.com/images/banner.png',
success: function (res) {
console.log('转发成功' + res)
}
}
}

注意在这里不能通过异步获取参数,因为这个函数要立即返回一个值,而不能是 promise 等,可以在 onload 里面获取参数:

1
2
3
4
5
6
onLoad: function (res) {
const that = this
that.setData({
shareId: res.userId
})
}

如果确实有异步行为,建议在交互上做一些处理,通过两个按钮来达到目的。另外,由于组件button的open-type="share"属性1.2.0版本之上才支持,因此先根据兼容方式–组件进行处理。

wxml 代码:

1
<button size="mini" type="default" bindtap="onClickShare" open-type="share">转发</button>

兼容处理方式:

1
2
3
4
5
6
7
8
9
10
11
onClickShare: function (e) {
if(wx.canIUse){
if (wx.canIUse('button.open-type.share')) {
return;
}
}
wx.showModal({
title: '提示',
content: '当前微信版本过低,无法使用该功能,请点击右上角<转发>菜单进行分享。'
});
}

如果发现分享的时候,都没有执行这个 onShareAppMessage 方法,创建页面的时候,开发工具不是自动创建了page.js文件吗,那个文件里面,默认初始化了很多常用方法,其中就包括 onShareAppMessage,拉下去才看到编辑器自动创建的 onShareAppMessage 方法。

关于下拉刷新

首先在全局 config 中的 window 配置 enablePullDownRefresh,然后在 Page 中定义 onPullDownRefresh 钩子函数。到达下拉刷新条件后,该钩子函数执行,发起请求方法。请求返回后,调用 wx.stopPullDownRefresh 停止下拉刷新。

1
2
3
4
5
6
7
8
9
10
11
12
config = {
pages: [
'pages/index'
],
window: {
backgroundTextStyle: 'light',
navigationBarBackgroundColor: '#ccc',
navigationBarTitleText: 'WeChat',
navigationBarTextStyle: '#000',
enablePullDownRefresh: true
}
}
1
2
3
4
5
6
onPullDownRefresh() {
setTimeout(()=>{
this.getData = '数据拿到了'
wx.stopPullDownRefresh()
},3000)
}