微信小程序開發指南

一、介紹

官網
微信小程序，簡稱小程序，英文名 MiniProgram，是一種不需要下載安裝即可使用的應用，它實現了應用“觸手可及”的夢想，用戶掃一掃或者搜一下即可打開應用。也體現了“用完即走”的理念，對於用戶不用關心是否安裝太多應用的問題。應用將無處不在，隨時可用，但又無需安裝卸載。對於開發者而言，小程序開發門檻相對較低，難度不及APP，能夠滿足簡單的基礎應用。

小程序與普通網頁開發區別

• 小程序

  • 依賴於微信或其他APP上的一個應用形式，無法脫離其所在的APP
  • 在特定的環境中去開發，所用的組件、UI都是確定好了的，也不用去考慮兼容問題
  • 在速度上，小程序基於APP端去實現，在使用時就感到很流暢

• 普通網頁

  • 網頁開發用在移動端或者PC端的網頁開發技術
  • 開發時會有開發工具的選擇、框架的選擇、UI的選擇等問題，還要兼顧到瀏覽器是否兼容的問題
  • 網頁在不同的瀏覽器或設備中解析加載會比較慢一些
  • 網頁運行在瀏覽器中，當然有一些App內嵌了瀏覽器也是可以運行的
  • 網頁是需要通過網址來進行訪問的

小程序與傳統App區別

• 小程序
  • 依賴於微信或其他APP上的一個應用形式，無法脫離其所在的APP
  • 無需要安裝，開發技術要求較低，無需考慮應用兼容適配問題
• 傳統App：
  • 獨立運行，不需要依賴於誰
  • 需要用戶安裝，開發技術要求較高且開發時還需要解決設備兼容適配問題

小程序框架結構

• 整個小程序框架系統分為兩部分：邏輯層(JavaScript) 和 視圖層(WXML 和 WXSS)。
• 在視圖層與邏輯層間提供了數據傳輸和事件系統，讓開發者能夠專注於數據與邏輯。
• 只需要在邏輯層更改數據，視圖層內容就會相應更新。
  

二、開發前准備工作

申請賬號與登錄設置

官網

三、項目文件結構與配置

文件結構

1.文件主體結構

文件	必填	描述
app.js	是	小程序邏輯-小程序入口文件
app.json	是	小程序公共配置文件
app.wxss	否	小程序公共樣式表

2. 頁面結構

一個小程序page頁面由四個文件組成，分別是：

文件	必填	描述
js	是	頁面邏輯
wxml	是	頁面結構
wxss	否	頁面樣式表
json	否	頁面配置

3. sitemap 配置
4. project.config.json
編輯器配置，項目中我們可以操作編輯器來動態修改project配置，不用我們去死記硬背哪些配置相關單詞.

配置

app.json 是當前小程序的全局配置，包括了小程序的所有頁面路徑、界面表現、網絡超時時間、底部 tab 等。
注意點：

1. app.json中不能添加任何注釋。
2. key和value字符串必須用雙引號引起來。
3. 數組或對象最后一位不能有逗號。

{
  "pages":[
    "pages/index/index",
    "pages/logs/logs"
  ],
  "window":{
    "backgroundTextStyle":"light",
    "navigationBarBackgroundColor": "#fff",
    "navigationBarTitleText": "Weixin",
    "navigationBarTextStyle":"black"
  },
  "tabBar": {
    "list": [{
      "pagePath": "pages/index/index",
      "text": "首頁"
    }, {
      "pagePath": "pages/logs/index",
      "text": "日志"
    }]
  },
  "networkTimeout": {
    "request": 10000,
    "downloadFile": 10000
  },
  "debug": true
  "style": "v2",
  "sitemapLocation": "sitemap.json"
}

字段	描述
debug	debug調試是否開啟
pages	注冊小程序的頁面路徑列表
-	數組的第一項代表小程序的初始頁面（首頁）。小程序中新增/減少頁面，都需要對 pages 數組進行修改。
window	全局的默認窗口表現
-	用於設置小程序的狀態欄、導航條、標題、窗口背景色
tabBar	小程序底部或頂部菜單定義
networkTimeout	小程序網絡請求超時時間設置
usingComponents	自定義組件配置

三、基本語法

視圖結構 wxml

WXML是框架設計的一套標簽語言，結合基礎組件、事件系統，可以構建出頁面的結構。
wxml是一個嚴格的標記性語言，有開始就必須有結束，單標簽就一個有結束符。

1、數據綁定

語法：{{}}
在js邏輯層中定義數據源，在wxml通過插值表達式調用定義好的數據源中數據

<!-- wxml -->
<view>{{message}}</view>
<image srcc='{{src}}' />

<!-- page.js -->
page({
    data:{
        message:'ajgsdh',
        src:'sasd'
    }
})

2、setData修改數據源數值

語法：setData
通過一個setData方法來進行后續數據源數據的修改工作。
注意：this的指向問題，setData是當前頁面對象中的方法。

<!-- page.js -->
onLoad(){
    setTimeout(()=>{
        this.setData({message:'你好'})
    })
}

3、for循環列表渲染

語法：wx:for

• wx:for-index：指定數組當前下標的變量名（默認index）
• wx:fpr-item：指定數組當前元素變量名（默認item）
• wx:key：唯一標識符（提高性能，可定義也可以不定義）

data:{
    users:['張三','李四'],
    objArr:[
        {id:1,name:'搜索'},
        {id:2,name:'地方'}
    ]
}

用法一
<view wx:for='{{users}}' wx:key='{{index}}'>{{item}}--{{index}}</view>
用法二
<view wx:for='{{users}}' wx:for-index='key' wx:for-item='val' wx:key='{{key}}'>{{val}}--{{key}}</view>
用法三
<view wx:for='{{objArr}}' wx:key='{{item.id}}'>{{item}}--{{index}}</view>

4、if條件渲染

語法：wx:if
在框架中，使用 wx:if="{{condition}}" 來判斷是否需要渲染該代碼塊
也可以用 wx:elif 和 wx:else 來添加一個 else 塊

<view wx:if='{{age<10>}}'>青年</view>
<view wx:elif='{{age<20>}}'>少年</view>
<view wx:else>ss</view>

5、模塊引用（包含）

WXML 提供兩種文件引用方式：import和include
1）import

1. 在user.wxml中定義一個item的template

<template name="user">
  <text>{{title}}</text>
</template>

注意： name template定義的模板名稱，一個文件中可以定義多個template但name的名稱不能重復

2. 在 index.wxml 中引用了 item.wxml，就可以使用item模板

<import src="item.wxml"/>
<template is="item" data="{{title: '你好世界'}}"/> 

注意：

• is ：指定定義存在好的模板名稱。
• data ：向模板中傳數據

2）include
把引入的文件內容直接復制到目錄文件中。
template 不生效

<include src="header.wxml"/>
<view> body </view>
<include src="footer.wxml"/>

樣式wxss

WXSS是一套樣式語言，用於描述 WXML 的組件樣式。WXSS 具有 CSS 大部分特性。同時為了更適合開發微信小程序，WXSS 對 CSS 進行了擴充以及修改。

新增了尺寸單位

WXSS 在底層支持新的尺寸單位 rpx 響應式尺寸單位
小程序中全屏尺寸數值是 : 750rpx

提供了全局的樣式和局部樣式

定義在 app.wxss 中的樣式為全局樣式，作用於每一個頁面。
在 page 的 wxss 文件中定義的樣式為局部樣式，只作用在對應的頁面，並會覆蓋 app.wxss 中相同的選擇器。

支持部分 CSS 選擇器

選擇器	樣例	樣例描述
.class	.intro	選擇所有擁有 class="intro" 的組件
#id	#firstname	選擇擁有 id="firstname" 的組件
element	view	選擇所有 view 組件
element, element	view, checkbox	選擇所有文檔的 view 組件和所有的 checkbox 組件
::after	view::after	在 view 組件后邊插入內容
::before	view::before	在 view 組件前邊插入內容

生命周期

小程序數據互交就是通過不同的事件函數來完成的，了解生命周期函數，對於以后的數據交互是非常重要的。

名稱	描述
onLoad(options)	頁面加載時觸發，可獲取路徑中的參數(1)
onReady()	頁面渲染完成(1)
onShow()	頁面顯示/切入前台觸發(N)
onHide()	頁面隱藏/切入后台時觸發(N)
onPullDownRefresh()	監聽用戶下拉動作，此事件需要在app.json文件中window節點中"開啟全局的下拉刷新"enablePullDownRefresh":true,才能觸發它
onReachBottom()	上拉觸底事件，需要當前頁內容超過一屏幕
onPageScroll()	滾動事件
onShareAppMessage()	自定義分享
onUnload()	頁面卸載

四、事件

事件綁定

語法：bind:事件名='方法名'、catch:事件名='方法名'
注意：次奧程序中綁定</font color='red'>方法名不能用小括號()，直接寫方法名稱即可
bind：冒泡事件
catch：非冒泡事件
原生組件：camera、canvas、live-player、live-pusher、video、map、textarea、input
非原生組件：bind和catch后可以緊跟一個冒號，其含義不變，如bind:tap='方法名'

<view bind:touchstart='start' bind:touchedn='end'></view>
<view bind:touchstart='click2' ></view>

click2(){}
...

事件對象

BaseEvent 基礎事件對象屬性列表

屬性	類型	說明
type	string	事件類型
timeStamp	Integer	事件生成的時間戳
target	Object	觸發事件的組件的一些屬性值集合 data-開頭定義的屬性
currentTarget	Object	當前組件的一些屬性值集合（對象）在組件中data-開頭定義的屬性

getSomeData(evt){
    console.log(evt.type,'cc') //類型
    console.log(evt.timeStamp,Date.now(),'dd') //時間
    console.log(evt.target,'ee')  //屬性
    console.log(evt.currentTarget,'ff') //屬性
} 

五、組件

組件通常包括開始標簽和結束標簽，屬性用來修飾這個組件，內容在兩個標簽之間。

屬性值

類型	描述	注解
Boolean	布爾值	組件寫上該屬性，不管該屬性等於什么，其值都為true，只有組件上沒有寫該屬性時，屬性值才為false。如果屬性值為變量，變量的值會被轉換為Boolean類型{{}}
Number	數字	1, 2.5{{}}
String	字符串	"string"
Array	數組	[ 1, "string" ]{{}}
Object	對象	{ key: value }{{}}
EventHandler	事件處理函數名	"handlerName" 是 Page中定義的事件處理函數名

共同屬性

屬性名	類型	描述	注解
id	String	組件的唯一標示	保持整個頁面唯一
class	String	組件的樣式類	在對應的 WXSS 中定義的樣式類
style	String	組件的內聯樣式	可以動態設置的內聯樣式
hidden	Boolean [false]	組件是否顯示	所有組件默認顯示
data-*	Any	自定義屬性	組件上觸發的事件時，會發送給事件處理函數
bind* / catch*	EventHandler	組件的事件	詳見事件
tab切換

<view class='nav'>
    <view class='{{css[0]}}' data-index='{{0}}' bind:tap='tabfn'>欄目一</view>
    <view class='{{css[1]}}' data-index='{{1}}' bind:tap='tabfn'>欄目二</view>
</view>
<view class='cnt'>
    <view hidden='{{isshow[0]}}'></view>
    <view hidden={{isshow[1]}}></view>
</view>

Page({
    data:{
        css:['now',''],
        isshow:[false,true]
    },
    tabfun(event){
        let index=event.target.dataset.index //獲取data-*傳值
        let css=this.data.css
        let isshow=this.data.isshow.mao((item,key)=>{
            css[key]=''
            return true
        })
        css[index]='now'
        isshow[index]=false
        this.setData({isshow,css})
    }
})

自定義組件

1. 新加組件(工具新加component)
2. 需要引入組件的頁面配置文件 json中定義 name path，

   {
       "usingComponents": {
           // 在父模板中調用的標簽名    組件的路徑
           "com-name": "path/to/the/custom/component"
       }
   }
   

3. 頁面中調用組件

   <com-name>
   

組建通信

父--->子通信

原理：類似於vue 自定義屬性--properties接收
父級:

<com-name name='測試'>

子集:

properties:{ 
    name:{
        type:String,
        optionalTypes:[String,Number]
        value:'123'
    }
}  

子集--->父級

原理：類似於vue 自定義事件並（triggerEvent）傳遞---evt.detail
子集：

<view data-name='son' bind:Tap='sonClick'></view>

sonClick(evt){
    let name=evt.target.dataset.name
    this.triggerEvent('getName',{name},false)
}

父級:

<com-name bind:getName='click'/>

click(evt){![](https://img2020.cnblogs.com/blog/1731300/202109/1731300-20210927140557579-1531021586.jpg)

    let name=evt.detail
} 

六、WXS模塊

• WXS（WeiXin Script）：是小程序的一套腳本語言，結合 WXML，可以構建出頁面的結構。
• WXS：中定義的函數可以在wxml文件中使用，可以用它來當過濾器使用。
• WXS：以.wxs擴展名結尾，文件中代碼寫法和JS類似，不支持ES6寫法
• WXS：不是js（wxs只支持部份js語法）

寫法與js類似，不支持ES6
創建wxs模塊
tools.wxs

function mysub(str,len){
    return ...
}
module.exports={
    mysub:mysub
}

調用
在wxml文件去引用
引用的時候一定要用相對應地址
每個 wxs 模塊均有一個內置的 module 對象。

<wxs src='../../tools.wxs' module='tools'/>
<view>tools.mysub('hfghaf')</view>

七、網絡請求

wx.request(OBJECT)

• 發起 HTTPS 網絡請求,上線時一定要有https服務器，但在本機開發時可以沒有https服務器
• 測試支持的並數請求數5個
• HTTPS 證書必須有效 而且是TLS1.2及以上版本
• 最好要設置一下 app.json中request請求的超時時間

1. 設置請求超時時間

   <!-- app.json -->
   "networkTimeout":{
       "request":10000
   }
   

2. 封裝請求

   <!-- http.js -->
   const http = ({url,data={},method='Get',header={}})=>{
       wx.showLoading({
           title:'加載中'
       })
       return new Promise((resolve,reject)=>{
           wx.request({
               url,
               method,
               success:res=>{
                   resolve(res)
               },
               fail:()=>{
                   reject('fail')
               },
               complete:()=>{
                   wx.hideLoading()
               }
           })
       })
   }
   

3. 配置請求地址

    <!-- config uri.js -->
    const host = 'http://localhost/api/v1'
    export default {
        new:'${host}/news'
    }
   

4. 請求模型

   <!-- models newsModels.js -->
   import http from '../utils/http'
   import config from '../config/uri'
   // 獲取新聞列表
   export const getNew=(page=1)=>{
       return http({
           url:config.news
       })
   }
   

5. 調用

   import {getNews} from '../../models/newsModel'
   getNews().then(res=>{
       this.setData({
           news:res.data
       })
   })
   

八、 緩存

小程序是有緩存的，但是它緩存沒有過期時間，單個 key 允許存儲的最大數據長度為 1MB，所有數據存儲上限為 10MB。
如果緩存達到了上限，清除緩存，清除緩存機制：最久未被使用。
重要的數據不要放在小程序緩存中。

 class Cache {
    /* 
        1、設置緩存
            單位毫秒
    */
    set(key, value, expire = 36000) {
        expire = Date.now() + expire * 1000
        //原有的數據改成對象，加上緩存時間
        let data = { expire, value }
        wx.setStorage({
            key,
            data,

        });
    }
    /*
    2、獲取緩存 
    */
    get(key) {
        if (this.has(key)) {
            return ''
        }
        return wx.getStorage(key).value
    }
    /* 
        3、清理緩存
    */
    remove(key) {
        wx.removeStorage({
            key: key
        });
    }
}