美文网首页
微信小程序代码块(基础+常用)

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

作者: 黄成瑞 | 来源:发表于2020-07-02 11:25 被阅读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'
            }
        })
    

    相关文章

      网友评论

          本文标题:微信小程序代码块(基础+常用)

          本文链接:https://www.haomeiwen.com/subject/otilqktx.html