微信小程序代码块(基础+常用)

2020-07-02  本文已影响0人  黄成瑞

写小程序没有那么难,直接从我这里拷贝代码,改改就能用了,哈哈哈~

1.for循环
    <block wx:for="{{[1, 2, 3]}}">
        <view>{{index}}:</view>
        <view>{{item}}</view>
    </block>

2.if语句
    <block wx:if="{{boolean==true}}">
        <view class="bg_black"></view>
    </block>
    <block wx:elif="{{boolean==false}}">
        <view class="bg_red"></view>
    </block>
    <block wx:else>
        <view class="bg_red"></view>
    </block>

3.button按钮以及点击事件
    <view>{{ msg }}</view>
    <button bindtap="clickMe">点击我</button>
    Page({
        clickMe: function() {
            this.setData({ msg: "Hello World " })
        }
    })

4.地图
    <map></map>
    <map longitude="广州经度" latitude="广州纬度"></map>
    <map bindmarkertap="markertap" longitude="广州经度" latitude="广州纬度"></map>

5.获取用户地理位置
    wx.getLocation({
        type: 'wgs84',
        success: (res) => {
            var latitude = res.latitude // 纬度
            var longitude = res.longitude // 经度
        }
    })

6.调用微信扫一扫能力
    wx.scanCode({
        success: (res) => {
            console.log(res)
        }
    })

7.API调用的两种方式(callback 和 promise 形式)
    <!-- callback 形式调用 -->
    wx.chooseImage({
        success(res) {
            console.log('res:', res)
        }
    })
    <!-- promise 形式调用 -->
    wx.chooseImage().then(res => console.log('res: ', res))

8.列表渲染
    <!--wxml-->
    <view wx:for="{{array}}"> {{item}} </view>
    // page.js
    Page({
        data: {
            array: [1, 2, 3, 4, 5]
        }
     })

9.条件渲染
    <!--wxml-->
    <view wx:if="{{view == 'WEBVIEW'}}">WEBVIEW </view>
    <view wx:elif="{{view == 'APP'}}"> APP </view>
    <view wx:else="{{view == 'MINA'}}"> MINA </view>
    // page.js
    Page({
        data: {
            view: 'MINA'
        }
    })
上一篇下一篇

猜你喜欢

热点阅读