微信小程序代码块(基础+常用)
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'
}
})