微信小程序常用代码块集成

最近被公司安排了微信小程序的开发 记录一下常用的代码块 提高效率
点击事件处理

在.wxml中设置组件
    <view class="usermotto">
        <text class="user-motto">{{motto}}</text>
        <text class="usertext" bindtap='click'>{{text}}</text>
      </view>
    使用bindtap绑定js处理函数
在.js中进行函数处理
    在page中添加
        click:function(){
            console.log("click")
          },
    会在控制台输出click字符串

添加转发功能

在.js的page中添加
onShareAppMessage:function(){
    return{
      title:'创收生活',
      path:'pages/index/index'
    }
  },

变量作用域、文件作用域

在一个.js中声明的变量和函数只在当前页面下有效
不过在app.js中的APP的globalData数据为全局数据

点击按钮修改页面内容

首先使用data定义wxml中变量内容
然后定义一个按钮
    <button bindtap='changetext'>senddata</button>
在js中实现该函数
    changetext:function(){
        this.setData({
          text:"text changed"
        })
      },
通过this.setData函数可以修改data中相应key的value值，在显示界面显示该key的组件的内容也会变化

获取用户信息

console.log(this.globalData.userInfo)只能获取用户昵称，用户设置的国家和性别
新版本用open-data

WXML的数据绑定

在wxml文件中使用{{}}定义一个变量
可以在.js的data中设置key和value值，在{{}}中和key一样的值将会获得该key的value值

警告Now you can provide attr “wx:key” for a “wx:for” to improve performance

<view wx:for-item="item" wx:for="{{array}}" wx:key="id"> {{item}} </view>这样无警告
<view wx:for-item="item" wx:for="{{array}}"> {{item}} </view>这样有警告
微信的意思是如果你的列表不是静态的最好给每一个元素即item添加一个唯一的id或者说唯一的字符串或数字，而且最好不要动态改变

条件渲染

根据不同的条件决定是否渲染出现该组件
<view wx:if="{{view == 'WEBVIEW'}}"> WEBVIEW </view>
<view wx:elif="{{view == 'APP'}}"> APP </view>
<view wx:else="{{view == 'MINA'}}"> MINA </view>
可以在.js中使用setData改变key的值，wxml文件中的界面也会跟着key的改变而改变

获取点击事件的详细信息

可以获取组件中使用data-设置的信息
<button id="tap" data-hidden='jjjjj' data-k="kkkkk" bindtap='tapname'>senddata</button>
在.js文件中添加定义的函数
tapname: function (event){
    console.log(event)
  },
在控制台中会显示
{type: "tap", timeStamp: 2973, target: {…}, currentTarget: {…}, detail: {…}, …}
changedTouches
:
[{…}]
currentTarget
:
{id: "tap", offsetLeft: 106, offsetTop: 650, dataset: {…}}
detail
:
{x: 156, y: 673.6000366210938}
target
:
{id: "tap", offsetLeft: 106, offsetTop: 650, dataset: {…}}
打印出的event信息属性
https://developers.weixin.qq.com/miniprogram/dev/framework/view/wxml/event.html

事件绑定

在上面事件绑定使用的是bindtap加函数名，由bind和事件类型tap组成
事件绑定的写法为key=“value”,value即函数名

用按钮的方式跳转界面

在.wxml界面设置按钮
     <button type="default" size="{{defaultSize}}" loading="{{loading}}" plain="{{true}}"
            disabled="{{disabled}}" bindtap="setdefault" hover-class="other-button-hover">首页 </button>
     <button type="primary" size="{{defaultSize}}" loading="{{loading}}" plain="{{true}}"
            disabled="{{disabled}}" bindtap="settext" hover-class="other-button-hover">text1 </button>
在.js文件中进行处理
      setdefault:function(){
        wx.navigateTo({
          url: '../first/first'
        })
      },
      settext:function(){
        wx.navigateTo({
          url: '../text1/text1'
        })
      },

选取本地照片显示在image中

<image style="width: 200px; height: 200px; background-color: #eeeeee;" mode="{{mode}}" src="{{src}}" bindtap='imgtap'></image>

  setimg:function(){
    var _this =this
    wx.chooseImage({
      count: 1, // 默认9
      sizeType: ['original', 'compressed'], // 可以指定是原图还是压缩图，默认二者都有
      sourceType: ['album', 'camera'], // 可以指定来源是相册还是相机，默认二者都有
      success: function (res) {
        // 返回选定照片的本地文件路径列表，tempFilePath可以作为img标签的src属性显示图片
        var tempFilePaths = res.tempFilePaths
        _this.setData({
          src: tempFilePaths
        })
        //this.src=tempFilePaths

      }
    })
  },

点击图片弹出消息提示框

  imgtap:function(){
    wx.showToast({
      title: '成功',
      icon: 'success',
      duration: 2000
    })
  },

点击图片弹出loading提示框，指定时间后隐藏

  imgtap:function(){
    wx.showLoading({
      title: '加载中',
    })

    setTimeout(function () {
      wx.hideLoading()
    }, 2000)
  },

点击图片弹出模态弹窗可以点击确定或取消

  imgtap:function(){
    wx.showModal({
      title: '提示',
      content: '这是一个模态弹窗',
      success: function (res) {
        if (res.confirm) {
          console.log('用户点击确定')
        } else if (res.cancel) {
          console.log('用户点击取消')
        }
      }
    })
  },

调用扫码功能

 <button type="default" size="mini" bindtap="setcode">扫码 </button>
  setcode:function(){
    wx.scanCode({
      onlyFromCamera: true,
      success: (res) => {
        console.log(res)
      }
    })
  },

radio-group修改大小，radio修改大小

.radio{
    zoom:0.5;

    text-align: center;
}