微信小程序开发整理-mp3

一、生命周期

1、定义

生命周期(Life Cycle）是指一个对象从创建>运行→>销毁的整个阶段，强调的是一个时间段。

2、分类

应用生命周期（app.js）：特指小程序从启动->运行→销毁的过程

App({
//小程序初始化完成时，执行此函数，全局只触发一次。可以做一些初始化的工作。
onLaunch: function(options){ },
//小程序启动,或从后台进入前台显示时触发。
onShow: function(options) { },
//小程序从前台进入后台时触发。
onHide : function(){ }
})

页面生命周期（页面.js）：特指小程序中，每个页面的加载→渲染→销毁的过程

Page({
onLoad  : function(options){ }，// 监听页面加载，一个页面只调用1次
onShow  : function() { }，      //监听页面显示
onReady : function() { },       //监听页面初次渲染完成，一个页面只调用1次
onHide  : function() { },       //监听页面隐藏
onUnload: function() { }        //监听页面卸载，一个页面只调用1次
})

3、生命周期函数

定义：由小程序框架提供的内置函数，会伴随着生命周期，自动按次序执行。

作用：允许程序员在特定的时间点，执行某些特定的操作。例如，页面刚加载的时候，可以在onLoad生命周期函数中初始化页面的数据。

注意：生命周期强调的是时间段,生命周期函数强调的是时间点。

二、wxs脚本

1、定义

wxs ( weixin Script)是小程序独有的一套脚本语言，结合wxml，可以构建出页面的结构。

2、应用场景

wxml 中无法调用在页面的.js中定义的函数，但是wxml 中可以调用wxs 中定义的函数。因此，小程序中wxs的典型应用场景就是“过滤器”。

3、wxs和Javascript的关系

wxs的语法类似于JavaScript，但是wxs和JavaScript是完全不同的两种语言:

I、wxs有自己的数据类型:

• number数值类型
• string字符串类型
• boolean布尔类型
• object对象类型
• function函数类型
• array数组类型
• date日期类型
• regexp正则

II、wxs 不支持类似于ES6及以上的语法形式:

• 不支持: let、const、解构赋值、展开运算符、箭头函数、对象属性简写、etc...
• 支持: var定义变量、普通function函数等类似于ES5的语法

III、wxs遵循CommonJS规范:

• module对象
• require()函数
• module.exports对象

4、wxs的基本用法

内嵌wxs脚本：

wxs代码可以编写在wxml文件中的<wxs>标签内，就像Javascript 代码可以编写在html文件中的<script>标签内一样。
wxml文件中的每个<wxs></wxs>标签，必须提供 module属性，用来指定当前wxs的模块名称，方便在wxml中访问模块中的成员:

<view>{{m1.toUpper(username)}}</view>

<wxs module="m1">
//将文本转为大写形式he ->HE
    module.exports.toUpper = function(str) {
        return str.toUpperCase()
}
</wxs>

定义外联的wxs脚本：

wxs 代码还可以编写在以.wxs为后缀名的文件内，就像javascript 代码可以编写在以.js为后缀名的文件中一样。示例代码如下:

function toLower(str) {
    return str.toLowerCase()
}

module.exports = {
    toLower: toLower
}

使用外联的wxs脚本:

在wxml中引入外联的wxs 脚本时，必须为<wxs>标签添加 module和 src属性，其中:

• module用来指定模块的名称
• src用来指定要引入的脚本的路径，且必须是相对路径

<!--调用m2模块中的方法-->
<view>{{m2.toLower(country)}}</view>

<!--引用外联的 tools.wxs脚本，并命名为m2 -->
<wxs src="../ ../utils/tools.wxs" module="m2"></wxs>

5、wxs的特点

不能作为组件的事件回调：wxs典型的应用场景就是“过滤器”，经常配合Mustache语法进行使用：

<view>{{m2.toLower(country)}}</view>

在wxs中定义的函数不能作为组件的事件回调函数。例如，下面的用法是错误的:

<button bindtap="m2.toLower">按钮</button>

隔离性： 指的是 wxs的运行环境和其他JavaScript 代码是隔离的。体现在如下两方面:

• wxS 不能调用js中定义的函数
• wxs不能调用小程序提供的API

性能好：

• 在iOS设备上，小程序内的wxs会比JavaScript代码快2～20倍
• 在android设备上，二者的运行效率无差异

6、使用wxs处理手机号

 utils--->tools.wxs:

function spliPhone(str){
    if(str.length!==) return str

    var arr= str.split('')
    arr.splice(3,0,'-')
    arr.splice(8,0,'-')
    return arr.join('')
}

module.exports={
    spliPhone:spliPhone
},

<text>电话:{{tools.splitPhone(item.phone)}}</text>

<wxs src="../../utils/tools.wxs" module="tools"></wxs>

三、案例总结

1、九宫格改造——navigator传参

<!--九宫格区域-->
<view class="grid-list">
    <navigator class="grid-item" wx:for="{{gridList}}" wx:key="id" url=" /pages/shoplist/shoplist?id={{item.id}}&title={{item.name}}">
    <image src="{{item.icon}}"></image>
    <text>{{item.name}}</text>
</navigator>
</view>

2、动态设置页面标题：wx.setNavigationBarTitle(Object object)

data:{
 query:{}
},

onLoad: function (options){
 this.setData({
    query:options
    })
},

onReady: function (){
    wx.SetNavigationBarTitle({
        title: this.data.query.title,
    })
},

3、列表页面的API接口

以分页的形式，加载指定分类下商铺列表的数据:

• 接口地址：https:/ /www.escook.cn/categories/:cate_id/shops，其中URL地址中的:cate_id是动态参数，表示分类的ld
• 请求方式：GET请求
• 请求参数：_page表示请求第几页的数据、_limit表示每页请求几条数据

data:{
    query:{},
    shopList:[],
    page:1,
    pageSize:10,
    total:0
},


onLoad: function (options){
    this.getShopList()
},


getShopList() {
    //展示Loading效果
    wx.showLoading({
    title:'数据加载中...'
    })

    wx.request({
        url: `https: / /www.escook.cn/categories/${this.data. query.id};/shops`,
        method:'GET'，
        data: {
        _page: this.data.page,
        _limit: this.data.pageSize
        }
   }),
    success(res)=>{ 
        this.setData({
        shopList:[...this.data.shopList,...res.data],
        total:res.header['X-Total-Count']-0
        })
    },
    complete()=>{
    //隐藏Loading效果
     wx.showLoading()
    }
},

4、初步实现上拉加载效果并加载下一页数据

注意：json开启onReachBottom节点。

onReachBottom: function (){
    this.setData({
    page: this.data.page + 1
    })

    this.getShopList()
},

 一定要配置节流阀！！！（节流阀配置见mp2）

5、判断数据是否加载完毕

页码值（page）*每页显示多少条数据(pageSize)>=总数据条数(total)

onReachBottom: function (){
    if(this.data.page*this.data.pageSize>=this.data.total){
    //没有下一页数据
    return wx.showToast({
        title:'数据加载完毕！',
        icon:'none'
        })
    }
    this.setData({
    page: this.data.page + 1
    })

    this.getShopList()
},

6、 实现下拉刷新功能（相关配置见mp2）

注意：json开启enablePullDownRefresh节点。

onPullDownRefresh: function (){
    //重置关键信息
    this.setData({
    page: 1,
    shopList:[],
    total: 0
    })
    //重新发起请求
    this.getShopList(()=>{
        wx.stopPullDownRefresh()
    })
},



//cb&&cb()