關鍵字：“小程序 API”

【WXML 完成布局】

<view> == <div>

{{}} == <%= %> ejs | jsp2

<block wx:for=‘{{list}}‘ > 相關內容：視圖層 列表渲染

<navigator url="../pageName/pageName?transData={{item.transData}}" 相關內容：頁面鏈接 導航跳轉

CRUD 刪除功能按鈕，bindtap 綁定事件函數

  <!-- data-xxx 傳入 e.target.dataset.xxx -->
  <text class
 
=‘link‘ bindtap=‘deleteArea‘ data-areaid=‘{{item.areaId}}‘ data-areaname=‘{{item.areaName}}‘ data-index=‘{{index}}‘>刪除</text>

………………………………………………………………………………6

【WXSS 完成樣式】類似 css 盒子

…………………………………………………………………………

【json 定義一個頁面標題】參照模板

………………………………………………………………

【js 提交表單 等一些交互】

頁面初始數據 data <=> pageContext.setData (pageContext 是我自己定義的對象上下文，類似瀏覽器的window)

生命周期函數 onLoad 頁面加載時觸發，重點是【返回< 該頁面不會再觸發 原因是緩存】

生命周期函數 onShow 頁面顯示時觸發，重點是【每次跳轉到該頁面都觸發】

API

wx.request

　　url 註意【詳情】中我們可以關掉 ssl 驗證來支持純 http 而不是僅限 https 。

wx.showToast

wx.navigateTo 實現頁面跳轉

wx.showModal 提示窗口

………………………………………………………………………………

【具體表單】

<!--pages/operation/operation.wxml-->
<view class
 
=‘container‘>
  <form bindsubmit=‘formSubmit‘ bindreset=‘formReset‘>
    <!-- 區域名輸入框 -->
    <view class=‘row‘>
      <text>區域名：</text>
      <input type="text" name="areaName" placeholder=‘請輸入區域名‘ value=‘{{areaName}}‘ />
    </view>
    <!-- 優先級輸入框 -->
    <view class=‘row‘>
      <text>優先級：</text>
      <input type="text" name="priority" placeholder=‘數值越大排名越前‘ value=‘{{priority}}‘ />
    </view>
    <view class=‘row‘>
      <button type=‘primary‘ form-type=‘submit‘>提交</button>
      <button type=‘primary‘ form-type=‘reset‘>清空</button>
    </view>
  </form>
</view>

【關鍵函數】

  formSubmit: function (e) {
    // console.log(‘form發生了submit事件，攜帶數據為：‘, e.detail.value)
    var pageContext = this;
    var formData = e.detail.value;
    var url = pageContext.data.addUrl;
    // modify 和 add 區別是 areaId 有無，實際
    if(pageContext.data.areaId != null){
      formData.areaId = pageContext.data.areaId;
      url = pageContext.data.modifyUrl;
    }

    wx.request({
      url: url,
      data: JSON.stringify(formData),
      method:‘POST‘,
      header:{
        ‘Content-Type‘:‘application/json‘
      },
      success:function(res){
        var result = res.data.success;
        var toastText = ‘操作成功!‘;
        if(result != true){
          toastText = ‘操作失敗‘ + res.data.errMsg;
        }
        wx.showToast({
          title:toastText,
          icon:‘‘,
          duration:2000
        });
        // 一旦添加成功 就重定向 只是一個標誌
        if(pageContext.data.areaId == null){
          wx.redirectTo({
            url: ‘../arealist/arealist‘,
          })
        }
      }
    })
  },

小程序開發 從簡單的 crud 開始