微信小程序開發小記

時間 2020-06-23

標籤微信程序開發简体版

原文原文鏈接

開發前準備

首先在微信小程序平臺上申請一個 https://mp.weixin.qq.com/ 點擊當即註冊，在打開的頁面中選擇小程序後，填入相關的信息，就能夠完成註冊了
在信息頁面獲取AppId
安裝開發者工具，連接https://mp.weixin.qq.com/debu... 根據本身的操做系統下載對應的安裝包進行安裝
下載完畢後添加你的小程序，輸入AppId
添加頁面：在app.json中新增路徑，會自動在根目錄的pages文件夾下新增頁面文件夾，四件套，換湯不換藥的html+js+css+json配置

WXML模板

一、要求嚴格閉合
二、大小寫敏感css

雙括號html

雙括號{{}}，相似於vue的{{}}用法，能夠進行一些簡單的邏輯運算，數據綁定於對應js文件的data中vue
```

<text data-test="{{test}}"> hello world</text>
```

條件邏輯數據庫

<view wx:if="{{length > 5}}"> 1 </view>
   <view wx:elif="{{length > 2}}"> 2 </view>
   <view wx:else> 3 </view>
   <!--由於 wx:if 是一個控制屬性，須要將它添加到一個標籤上。若是要一次性判斷多個組件標籤，可使用一個 標籤將多個組件包裝        起來，並在上邊使用 wx:if 控制屬性-->
   <block wx:if="{{true}}">
     <view> view1 </view>
     <view> view2 </view>
   </block>

列表渲染npm

在組件上使用 wx:for 控制屬性綁定一個數組，便可使用數組中各項的數據重複渲染該組件。默認數組的當前項的下標變量名默認爲 index，數組當前項的變量名默認爲 itemjson

<!-- array 是一個數組 -->
   <view wx:for="{{array}}">
     {{index}}: {{item.message}}
   </view>
   <!-- 對應的腳本文件
   Page({
     data: {
       array: [{
         message: 'foo',
       }, {
         message: 'bar'
       }]
     }
   })
   -->
   <!--使用 wx:for-item 指定數組當前元素的變量名，使用 wx:for-index 指定數組當前下標的變量名：-->
   <view wx:for="{{array}}" wx:for-index="idx" wx:for-item="itemName">
     {{idx}}: {{itemName.message}}
   </view>
  <!-- 若是列表中項目的位置會動態改變或者有新的項目添加到列表中，使用 wx:key 來指定列表中項目的惟一的標識符。
   字符串，表明在 for 循環的 array 中 item 的某個 property，該 property 的值須要是列表中惟一的字符串或數字，且不能動態改變。
   保留關鍵字 this 表明在 for 循環中的 item 自己，這種表示須要 item 自己是一個惟一的字符串或者數字-->
   <!--wx:key 的值以兩種形式提供：-->
   <switch wx:for="{{objectArray}}" wx:key="unique" > {{item.id}} </switch>
   <switch wx:for="{{numberArray}}" wx:key="*this" > {{item}} </switch>

模板
WXML提供模板（template），能夠在模板中定義代碼片斷，而後在不一樣的地方調用。使用 name 屬性，做爲模板的名字。而後在 <template/> 內定義代碼片斷小程序

<!--
   item: {
     index: 0,
     msg: 'this is a template',
     time: '2016-06-18'
   }-->
   <template name="msgItem">
     <view>
       <text> {{index}}: {{msg}} </text>
       <text> Time: {{time}} </text>
     </view>
   </template>
   <template is="msgItem" data="{{...item}}"/>

引用
WXML 提供兩種文件引用方式import和include。
import 能夠在該文件中使用目標文件定義的 template後端

<!--在 item.wxml 中定義了一個叫 item的 template，在 index.wxml 中引用了 item.wxml，就可使用 item模板-->
   <import src="item.wxml"/>
   <template is="item" data="{{text: 'forbar'}}"/>

須要注意的是 import 有做用域的概念，即只會 import 目標文件中定義的 template，而不會 import 目標文件中 import 的 template，簡言之就是 import 不具備遞歸的特性微信小程序

<!--include 能夠將目標文件中除了 <template/> <wxs/> 外的整個代碼引入，至關因而拷貝到 include 位置-->
   <!-- index.wxml -->
   <include src="header.wxml"/>
   <view> body </view>
   <include src="footer.wxml"/>

共同屬性
全部wxml 標籤都支持的屬性稱之爲共同屬性

WXSS樣式

WXSS與Web開發中的CSS相似數組

分別爲頁面樣式、其餘樣式、公用樣式
公用樣式：會被注入到小程序的每一個頁面
頁面樣式：與app.json註冊過的頁面同名且位置同級的WXSS文件
其它樣式：其它樣式能夠被項目公共樣式和頁面樣式引用

尺寸
在WXSS中，引入了rpx（responsive pixel）尺寸單位。引用新尺寸單位的目的是，適配不一樣寬度的屏幕

WXSS引用

<!--小程序中的樣式引用-->
 @import './test_0.wxss'

內聯樣式
WXSS內聯樣式與Web開發一致
小程序支持動態更新內聯樣式：

<!--可動態變化的內聯樣式-->
<!--
{
 eleColor: 'red',
 eleFontsize: '48rpx'
}-->
<view style="color: {{eleColor}}; font-size: {{eleFontsize}}"></view>

選擇器
感受跟原生css沒有太大差異

模塊化
在須要使用這些模塊的文件中，使用 require(path) 將公共代碼引入

// moduleA.js
module.exports = function( value ){
 return value * 2;
}
// 在B.js中引用模塊A
var multiplyBy2 = require('./moduleA')
var result = multiplyBy2(4)

做用域
當須要使用全局變量的時，經過使用全局函數 getApp() 獲取全局的實例，並設置相關屬性值

// a.js
   // 獲取全局變量
   var global = getApp()
   global.globalValue = 'globalValue'
   // b.js
   // 訪問全局變量
   var global = getApp()
   console.log(global.globalValue) // 輸出 globalValue

盒式佈局
具體能夠看官方文檔，和經常使用的flex佈局相似
https://developers.weixin.qq....

經常使用交互

雲函數
模擬後端的函數操做，在每一個新建的雲函數中，先npm install一下wx-server-sdk（每一個都要），而後上傳你的雲函數，就能夠在雲平臺看到相關函數，進行測試等等

雲函數的調用：

wx.cloud.callFunction({
      name: 'resp',
      data: {
        data: '測試數據'
      },
      success: res => {
        wx.showToast({
          title: '發佈成功',
        })
        this.setData({
          name: JSON.stringify(res.result.data.total)
        })
      },
      fail: err => {
        wx.showToast({
          icon: 'none',
          title: '調用失敗',
        })
        console.error('[雲函數] [sum] 調用失敗：', err)
      }
    })

雲函數中操做數據庫（官方文檔寫的很迷），這邊總結一下：

// 雲函數入口文件
const cloud = require('wx-server-sdk')

cloud.init()
const db = cloud.database()
// 雲函數入口函數
exports.main = async (event, context) => {
  // const wxContext = cloud.getWXContext()
  const add = await db.collection('counters').add({
    data: {
      count: 1,
      data: event.data
    }
  })
  const count = await db.collection('counters').count()
  return {
    data: count
  }
}

關於Loading的問題
一些點擊以後上傳數據的交互，好比Button的loading方法，在微信小程序中只是添加一個按鈕樣式？？？爲了防止用戶極快速度觸發兩次tap回調，能夠一個hasClick的「鎖」，在開始請求前檢查是否已經發起過請求，若是沒有才發起此次請求，等到請求返回以後再把鎖的狀態恢復回去

var hasClick = false
if (hasClick) {
      return
    }
hasClick = true
wx.showLoading()
//在返回完成記得恢復狀態
complete: data => {
        hasClick = false
      }