微信小程序（二）

小程序相关

基本标签

view （快标签）

<view></view>

image（图片标签）

！！！注：图片要给相对路径

<image class="tp" src="1.png"></image>

text（文本标签）

<text>hello world</text>

模板语法

使用 {{}} 来输出（可以做运算）

<text>{{name}}</text>

Page({
    data:{
        name:'张三'
    }
})

运算

<!-- 普通运算 -->
<text>{{1+1}}</text>
<!-- 字符串运算 -->
<text>{{'1'+'1'}}</text>
<!-- 三目运算 -->
<text>{{3>4?"大":"小"}}</text>
。。。

数据绑定

1. 小程序

1. data中初始化数据

2. 修改数据使用 this.setData()

Page({
    data:{
        name:'张三'
    },

    //	生命周期函数--监听页面加载
    onLoad: function (options) {
        // 修改 name 状态数据
        // this 代表当前页面的实例对象
        // 在回调函数中是同步修改
        this.setData({
            name:'李四'
        })
        console.log(this.data.msg)	//	李四
    }, 
})

3. 数据流：

   1. 单项： Model —> View

2. Vue

1. data中初始化数据

2. 修改数据: this.key = value

3. 数据流：

   1. Vue是单项数据流： Model —> View
   2. Vue中实现了双向数据绑定： v-model

4. Vue劫持代理 底层原理

   // Vue数据劫持代理
   
   // 模拟Vue中data选项
   
   let data = {
     username: 'curry',
     age: 33
   }
   
   // 模拟组件的实例
   let _this = {
   
   }
   
   // 利用Object.defineProperty()
   for(let item in data){
     // console.log(item, data[item]);
     Object.defineProperty(_this, item, {
       // get：用来获取扩展属性值的， 当获取该属性值的时候调用get方法
       get(){
         console.log('get()');
         return data[item]
       },
       // set： 监视扩展属性的， 只要已修改就调用
       set(newValue){
         console.log('set()', newValue);
         // _this.username = newValue; 千万不要在set方中修改修改当前扩展属性的值，会出现死循环
         data[item] = newValue;
       }
     })
   }
   
   console.log(_this);
   // 通过Object.defineProperty的get方法添加的扩展属性不能直接对象.属性修改
   _this.username = 'wade';
   console.log(_this.username);
   
   

事件绑定

bind 绑定：事件绑定不会阻止冒泡事件向上冒泡（会冒泡）

<view class="wb" bindtap="han">
    <text bindtap="haa">hello world</text>
</view>

catch 绑定: 事件绑定可以阻止冒泡事件向上冒泡（不会冒泡）

<view class="wb" catchtap="han">
    <text catchtap="haa">hello world</text>
</view>

WXML的冒泡事件列表：

类型	触发条件	最低版本
touchstart	手指触摸动作开始
touchmove	手指触摸后移动
touchcancel	手指触摸动作被打断，如来电提醒，弹窗
touchend	手指触摸动作结束
tap	手指触摸后马上离开
longpress	手指触摸后，超过350ms再离开，如果指定了事件回调函数并触发了这个事件，tap事件将不被触发	1.5.0
longtap	手指触摸后，超过350ms再离开（推荐使用longpress事件代替）
transitionend	会在 WXSS transition 或 wx.createAnimation 动画结束后触发
animationstart	会在一个 WXSS animation 动画开始时触发
animationiteration	会在一个 WXSS animation 一次迭代结束时触发
animationend	会在一个 WXSS animation 动画完成时触发
touchforcechange	在支持 3D Touch 的 iPhone 设备，重按时会触发	1.9.90

路由跳转（API）

wx.navigateTo(Object object)

保留当前页面，跳转到应用内的某个页面。但是不能跳到 tabbar 页面。使用 wx.navigateBack 可以返回到原页面。小程序中页面栈最多十层。

参数

Object object

属性	类型	默认值	必填	说明
url	string		是	需要跳转的应用内非 tabBar 的页面的路径 (代码包路径), 路径后可以带参数。参数与路径之间使用 ? 分隔，参数键与参数值用 = 相连，不同参数用 & 分隔；如 ‘path?key=value&key2=value2’
events	Object		否	页面间通信接口，用于监听被打开页面发送到当前页面的数据。基础库 2.7.3 开始支持。
success	function		否	接口调用成功的回调函数
fail	function		否	接口调用失败的回调函数
complete	function		否	接口调用结束的回调函数（调用成功、失败都会执行）

示例代码

wx.navigateTo({
    url: '/pages/logs/logs'
})

//test.js
Page({
    onLoad: function(option){
        console.log(option.query)
        const eventChannel = this.getOpenerEventChannel()
        eventChannel.emit('acceptDataFromOpenedPage', {data: 'test'});
        eventChannel.emit('someEvent', {data: 'test'});
        // 监听acceptDataFromOpenerPage事件，获取上一页面通过eventChannel传送到当前页面的数据
        eventChannel.on('acceptDataFromOpenerPage', function(data) {
            console.log(data)
        })
    }
})

wx.redirectTo(Object object)

关闭当前页面，跳转到应用内的某个页面。但是不允许跳转到 tabbar 页面。

参数

Object object

属性	类型	默认值	必填	说明
url	string		是	需要跳转的应用内非 tabBar 的页面的路径 (代码包路径), 路径后可以带参数。参数与路径之间使用 ? 分隔，参数键与参数值用 = 相连，不同参数用 & 分隔；如 ‘path?key=value&key2=value2’
success	function		否	接口调用成功的回调函数
fail	function		否	接口调用失败的回调函数
complete	function		否	接口调用结束的回调函数（调用成功、失败都会执行）

示例代码

wx.redirectTo({
    url: '/pages/logs/logs'
})

wx.reLaunch(Object object)

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

参数

Object object

属性	类型	默认值	必填	说明
url	string		是	需要跳转的应用内页面路径 (代码包路径)，路径后可以带参数。参数与路径之间使用?分隔，参数键与参数值用=相连，不同参数用&分隔；如 ‘path?key=value&key2=value2’
success	function		否	接口调用成功的回调函数
fail	function		否	接口调用失败的回调函数
complete	function		否	接口调用结束的回调函数（调用成功、失败都会执行）

示例代码

wx.reLaunch({
    url: '/pages/logs/logs'
})

声名周期

onLoad() （生命周期函数–监听页面加载）

onLoad: function (options) {
    console.log('onLoad  页面加载')
}

onReady() (生命周期函数–监听页面初次渲染完成)

onReady: function () {
    console.log('onReady  页面初次渲染完成')
}

onShow() (生命周期函数–监听页面显示)

onShow: function () {
    console.log('onShow  页面显示')
}

onHide() (生命周期函数–监听页面隐藏)

onHide: function () {
    console.log('onHide  页面隐藏')
},

onUnload() （生命周期函数–监听页面卸载）

onUnload: function () {
    console.log('onUnload  页面卸载')
},

用户授权

使用按钮自带属性 open-type=“getUserInfo” 可以获取用户信息

open-type 的合法值

值	说明	最低版本
getUserInfo	获取用户信息，可以从bindgetuserinfo回调中获取到用户信息 （小程序插件中不能使用）	1.3.0

<button open-type="getUserInfo">获取用户信息</button>

获取信息的回调

属性	类型	默认值	必填	说明	最低版本
bindgetuserinfo	eventhandle		否	用户点击该按钮时，会返回获取到的用户信息，回调的detail数据与wx.getUserInfo返回的一致，open-type="getUserInfo"时有效	1.3.0

<button bindgetuserinfo="handleGetuse" open-type="getUserInfo">获取用户信息</button>

Page({
    handleGetuse(res){
        console.log(res)
    }
})

获取用户信息（API）

wx.getUserInfo(Object object)

！！！注:需要在用户信息功能页中获得用户授权之后调用。否则将返回 fail。

参数

Object object

属性	类型	默认值	必填	说明
withCredentials	boolean		否	是否带上登录态信息。当 withCredentials 为 true 时，要求此前有调用过 wx.login 且登录态尚未过期，此时返回的数据会包含 encryptedData, iv 等敏感信息；当 withCredentials 为 false 时，不要求有登录态，返回的数据不包含 encryptedData, iv 等敏感信息。
lang	string	en	否	显示用户信息的语言
success	function		否	接口调用成功的回调函数
fail	function		否	接口调用失败的回调函数
complete	function		否	接口调用结束的回调函数（调用成功、失败都会执行）

object.success 回调函数

Object res

属性	类型	说明	最低版本
userInfo	UserInfo	用户信息对象，不包含 openid 等敏感信息
rawData	string	不包括敏感信息的原始数据字符串，用于计算签名
signature	string	使用 sha1( rawData + sessionkey ) 得到字符串，用于校验用户信息，详见 用户数据的签名验证和加解密
encryptedData	string	包括敏感数据在内的完整用户信息的加密数据，详见 用户数据的签名验证和加解密
iv	string	加密算法的初始向量，详见 用户数据的签名验证和加解密
cloudID	string	敏感数据对应的云 ID，开通云开发的小程序才会返回，可通过云调用直接获取开放数据，详细见云调用直接获取开放数据

案例

onLoad: function (options) {
    wx.getUserInfo({
        success: (res) => {
            console.log(res)
            this.setData({
                userInfo:res.userInfo
            })
        },
        fail: (err) => {
            console.log(err)
        }
    })
}

条件渲染

1. wx:if=‘条件’

   相当于原来的 if 判断

  <view wx:if='1<2'>123</view>

2. wx:elif=‘条件’

   相当于原来的 else if 判断

   <view wx:if='1>2'>123</view>
   <view wx:elif='3>2'>456</view>

3. wx:else

   相当于原来的 else

   <view wx:if='1>2'>123</view>
   <view wx:elif='3>2'>456</view>
   <view wx:else>789</view>

总结

本篇文章主要讲述了一些基础标签的用法、生命周期、常用 API 和条件渲染