微信小程序開發筆記

在index.wxml中，可以用{{a+2}}進行數字運算。
在index.js中，通過Page({data: {a: 1}})設定預設值。

在index.wxml中，用邏輯值選擇顯示框︰
<view style="text-align:center">考试成绩{{score}}分</view>
<view wx:if="{{score<60}}">不及格</view>
<view wx:elif="{{score>=80}}">优秀</view>
<view wx:else>良好</view>
<view wx:if="{{score!==''}}">不为空</view>

迴圈顯示︰
Page({
onLoad: function (options) {
    var courseList = [{
      img:"../../images/sp2.png",
      name:"Spring Boot 2.x零基础入门到高级实战教程1"
    }, {
        img: "../../images/sp2.png",
        name: "Spring Boot 2.x零基础入门到高级实战教程2"
      }];
    this.setData({
      list: courseList
    })
}
});
<!--pages/index/index.wxml-->
<view class="list">
  <block wx:for="{{list}}" wx:for-item="course" wx:for-index="idx">
  <view class="item">
    <view class="item_img">
      <image src="{{course.img}}"></image>
    </view>
    <view class="item_name">{{course.name}}</view>
    <view>{{idx}}</view>
  </view>
  </block>
</view>

更新變量︰
data: {
    textStr:"hello world"
  },
  //点击事件
  changeData:function(){
    this.setData({
      textStr:"hello 小程序"
    })
  },
  //触摸移动
  tmove:function(){
    console.log("touchend");
  },
  //长按触发
  lpress:function(){
    console.log("longpress")
  },
<!--pages/index/index.wxml-->
<view>{{textStr}}</view>
<button bindtouchstart="changeData" bindtouchend="tmove" bindlongpress="lpress">改变数据</button>

點擊標籤︰
  containerTap:function(){
    console.log("container"); //框
  },
  txtTap:function(){
    console.log("text"); //未成功觸發
  },
  captureTap:function(){
    console.log("capturetap") //框
  },
  captureTap2:function(){
    console.log("capturetap2") //文字
  },
<view class="box" bindtap="containerTap" capture-bind:tap="captureTap">
  <text bindtap="txtTap" capture-catch:tap="captureTap2">小程序</text>
</view>

常用部件︰
<!--pages/index/index.wxml-->
//圖標
<icon type="warn" size="100rpx" color="red"></icon>
//進度條
<progress percent="30" show-info="true" border-radius="10" stroke-width="50rpx" activeColor="red" backgroundColor="#000" active="true"></progress>
//富文本, 好用︰https://segmentfault.com/a/1190000017099003
<rich-text nodes="{{textStr}}"></rich-text>
//文字
<text selectable="true">小程序</text>