O_微信小程序的二三事

Web开发, 源生

MZTools小程序

　　MZTools

最新 v3.02.230122a 结项源码。

参考

1.开发文档

　　微信小程序开发文档（官方）
　　微信小程序开发文档（W3Cschool）
　　小程序自学系列（零基础学小程序）

2.60秒倒计时示例

　　

1
2
3
4
<!--index.wxml-->
<view class="container">
  <text>倒计时: {{second}} </text>
</view>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
//index.js
// 从从60到到0倒计时
function countdown(that) {
  var second = that.data.second
  //使得Page外的函数变量可以同步数据到wxml
  var time = setTimeout(function(){
  that.setData({
    second: second - 1
  });
  countdown(that);
 }
 ,1000)
}
Page({
  data: {
    second: 60
  },
onLoad: function() {
  countdown(this);
  }
});

3.格式化输出时间

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
// 在需要使用的js文件中，导入js
var util = require('../../utils/util.js');
Page({
  data: {
  time:util.formatTime(new Date())
  },
  onLoad: function () {
    //调用函数时，传入new Date()参数，返回值是日期和时间
    var time = util.formatTime(new Date());
    //再通过setData更改Page()里面的data，动态更新页面的数据
    this.setData({
      time: time
    });
  }
})

　　更详细的用法，请参照util.js。

4.this和that

　　示例一：示例一为错误示例，会出现 this.setData is not a function 的报错，原因是此时的this对象指的是setTimeout 里面的匿名函数对象，但是在这种情况下还是想动态渲染视图，就需要把当前的this的状态保存起来，然后在 setTimeout 里面的匿名函数对象内调用。如示例二。

1
2
3
4
5
6
7
onLoad:function(){
  setTimeout(function () {
    this.setData({
      open: 111
    },1000)
  })
},

　　示例二：保存当前对象的this状态，在 setTimeout 里面的匿名函数对象内调用，此时能够做到动态选择视图同时数据和视图都不会出错。

1
2
3
4
5
6
7
8
onLoad:function(){
  var that= this;
  setTimeout(function () {
    that.setData({
      open: 111
    },1000)
  })
},

5.wx:for

　　在组件上使用 wx:for 控制属性绑定一个数组，即可使用数组中各项的数据重复渲染该组件。
　　默认数组的当前项的下标变量名默认为 index，数组当前项的变量名默认为 item

1
2
3
4
5
6
7
8
9
10
11
12
<view wx:for="{{array}}">
  {{index}}: {{item.message}}
</view>
Page({
  data: {
    array: [{
      message: 'foo',
    }, {
      message: 'bar'
    }]
  }
})

　　使用 wx:for-item 可以指定数组当前元素的变量名，
　　使用 wx:for-index 可以指定数组当前下标的变量名：

1
2
3
4
5
6
7
8
9
10
11
<view wx:for="{{array}}" wx:for-index="idx" wx:for-item="itemName">
  {{idx}}: {{itemName.message}}
</view>
wx:for 也可以嵌套，下边是一个九九乘法表
<view wx:for="{{[1, 2, 3, 4, 5, 6, 7, 8, 9]}}" wx:for-item="i">
  <view wx:for="{{[1, 2, 3, 4, 5, 6, 7, 8, 9]}}" wx:for-item="j">
    <view wx:if="{{i <= j}}">
      {{i}} * {{j}} = {{i * j}}
    </view>
  </view>
</view>

　　微信小程序 列表渲染 wx:for

　　微信小程序开发——wx:for循环渲染元素如何修改点击样式

　　效果图（主要是数据的改变和传递）
　　xchx1

6.应用与页面的生命周期

App()
　　App() 函数用来注册一个小程序。接受一个 object 参数，其指定小程序的生命周期函数等。
　　App.prototype.getCurrentPage() 用户获取当前页面的实例。

getApp()
　　我们提供了全局的 getApp() 函数，可以获取到小程序实例。

注意：
　　App() 必须在 app.js 中注册，且不能注册多个。
　　不要在定义于 App() 内的函数中调用 getApp() ，使用 this 就可以拿到 app 实例。
　　不要在 onLaunch 的时候调用 getCurrentPage()，此时 page 还没有生成。
　　通过 getApp() 获取实例之后，不要私自调用生命周期函数。

Page()
　　Page() 函数用来注册一个页面。接受一个 object 参数，其指定页面的初始数据、生命周期函数、事件处理函数等。

初始化数据
　　初始化数据将作为页面的第一次渲染。data 将会以 JSON 的形式由逻辑层传至渲染层，所以其数据必须是可以转成 JSON 的格式：字符串，数字，布尔值，对象，数组。
　　渲染层可以通过 WXML 对数据进行绑定。

生命周期函数
onLoad: 页面加载
　　一个页面只会调用一次。参数可以获取wx.navigateTo和wx.redirectTo及中的 query。
onShow: 页面显示
　　每次打开页面都会调用一次。
onReady: 页面初次渲染完成
　　一个页面只会调用一次，代表页面已经准备妥当，可以和视图层进行交互。
　　对界面的设置如wx.setNavigationBarTitle请在onReady之后设置。详见生命周期
onHide: 页面隐藏
　　当navigateTo或底部tab切换时调用。
onUnload: 页面卸载
　　当redirectTo或navigateBack的时候调用。

页面相关事件处理函数
onPullDownRefresh: 下拉刷新
　　监听用户下拉刷新事件。
　　需要在config的window选项中开启enablePullDownRefresh。
　　当处理完数据刷新后，wx.stopPullDownRefresh可以停止当前页面的下拉刷新。

setData()
　　接受一个对象，以 key，value 的形式表示将 this.data 中的 key 对应的值改变成 value。

　　微信小程序开发—应用与页面的生命周期

7.页面跳转

a.保留当前页面，跳转到应用内的某个页面，使用wx.navigateBack可以返回到原页面。
　　注意：调用 navigateTo 跳转时，调用该方法的页面会被加入堆栈，但是 redirectTo

1
2
3
wx.navigateTo({
  url: 'page/home/home?user_id=111'
})

b.关闭当前页面，跳转到应用内的某个页面。

1
2
3
wx.redirectTo({
  url: 'page/home/home?user_id=111'
})

c.跳转到tabBar页面（在app.json中注册过的tabBar页面），同时关闭其他非tabBar页面。

1
2
3
wx.switchTab({
  url: 'page/index/index'
})

d.关闭所有页面，打开到应用内的某个页面。

1
2
3
wx.reLanch({
  url: 'page/home/home?user_id=111'
})

　　微信小程序页面跳转方法总结

8.数据缓存

wx.setStorage(OBJECT)
　　将数据存储在本地缓存中指定的 key 中，会覆盖掉原来该 key 对应的内容，这是一个异步接口。
wx.setStorageSync(KEY,DATA)
　　将 data 存储在本地缓存中指定的 key 中，会覆盖掉原来该 key 对应的内容，这是一个同步接口。
wx.getStorage(OBJECT)
　　从本地缓存中异步获取指定 key 对应的内容。
wx.getStorageSync(KEY)
　　从本地缓存中同步获取指定 key 对应的内容。
wx.getStorageInfo(OBJECT)
　　异步获取当前storage的相关信息。
wx.getStorageInfoSync()
　　同步获取当前storage的相关信息。
wx.removeStorage(OBJECT)
　　从本地缓存中异步移除指定 key。
wx.removeStorageSync(KEY)
　　从本地缓存中同步移除指定 key。
wx.clearStorage()
　　清理本地数据缓存。
wx.clearStorageSync()
　　同步清理本地数据缓存。

　　微信小程序 缓存（本地缓存、异步缓存、同步缓存）详解

9.页面间数据转换

利用全局变量进行页面间数据转换
　　把常用且不会更改的参数放在APP.js的data里面，在各个page中都可以拿到var app = getApp();页面上就可以用app.data拿到存在data中的参数。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
//app.js
tempData:{
    tt:'TempString'
},

//x.js
var app = getApp();
var x_tt = '';
onLunch: function(){
    this.setData({
        x_tt:app.tempData.tt
    })
}

//z.wxml
<view>
<text>{{x_tt}}</text>
</view>

　　微信小程序开发之数据存储 参数传递 数据缓存

10.错误

1
2
3
4
var message;
message.push(1);

//报错：Cannot read property 'push' of undefined.

　　将var message改为var message = [];
　　push是数组的一个方法，而不是undefined的一个方法，所以message需要是一个数组。

11.其他

　　JavaScript数组、类型转换相关，由于精力有限，此处不便赘述，请参考各JavaScript教程。

12.小程序社区

　　小程序社区