什么是小程序相信我也不必介紹大家一定都是知道的, 我這里的本意是整理一份小程序的文檔, 一方面加深自身的記憶, 另一方面也是官方文檔有點(diǎn)多, 不太好熟悉自己找一些感覺自身比較常用的提煉出來方便記憶 ;

搭建環(huán)境

注冊賬號我這里就不說了 直接上鏈接 微信公眾平臺 需要注意的是注冊賬號時記得選擇小程序選項(xiàng) ; 注冊成功后會進(jìn)入一個類似于小程序的后臺管理頁面 ; 其他的就不說了 建議大家看一遍, 重點(diǎn)在 開發(fā)

下一步安裝開發(fā)工具, 微信小程序開發(fā)工具安裝及其簡單, 這里不描述具體安裝步驟 附上地址 大家根據(jù)自身的系統(tǒng)自行安裝吧

打開咱們剛安裝的編輯器 -> 選擇小程序 -> 點(diǎn)擊 + ; 自行創(chuàng)建項(xiàng)目, 這里的 AppID 就是上面提到的管理后臺中開發(fā)選項(xiàng)中的AppID 復(fù)制即可 ; 這里建議大家先不要選用云開發(fā) 后面我會單獨(dú)開一章說 ;

工具

這里咱們只說一下主體內(nèi)容, 其余功能自己探索吧 ;

目錄結(jié)構(gòu)

├─pages
│  ├─index  // 對應(yīng)每個頁面 內(nèi)部必須包含以下四個文件
│  │      index.js  // 頁面邏輯
│  │      index.json // 頁面配置
│  │      index.wxml // 頁面結(jié)構(gòu)
│  │      index.wxss // 頁面樣式
│  └─logs
│          logs.js
│          logs.json
│          logs.wxml
│          logs.wxss
└─utils  // 工具類
│      util.js
│  app.js  // 描述小程序整體邏輯
│  app.json  // 小程序公共配置
│  app.wxss  // 小程序公共樣式
│  project.config.json // 項(xiàng)目配置文件
│  sitemap.json
/**
* 需要注意的是 page 中4個文件必須同名
**/
復(fù)制代碼

小程序配置

小程序根目錄下的 app.json 文件用來對微信小程序進(jìn)行全局配置

{ 
    // 配置小程序默認(rèn)啟動頁
    "entryPagePath": "pages/logs/logs",
    // 對應(yīng)小程序中的每一個頁面,如果沒有 entryPagePath, pages中的第一項(xiàng)為啟動頁
    "pages": [
        "pages/index/index",
        "pages/logs/logs"
    ],
    "window": {
        // 導(dǎo)航欄背景顏色
        "navigationBarBackgroundColor": "#ccc",
        // 導(dǎo)航欄文字顏色 white black
        "navigationBarTextStyle":"white",
        // 導(dǎo)航欄文字內(nèi)容
        "navigationBarTitleText": "wx",
        // 下拉 loading 樣式 dark light; 需要配置下面這個配置才能開啟
        "backgroundTextStyle": "dark",
        // 是否開啟全局的下拉刷新
        "enablePullDownRefresh": true,
        // 導(dǎo)航欄樣式 custom, default; custom以上配置全部失效,只保留右上角膠囊, topBar需要自己寫樣式定義
        "navigationStyle": "custom"
    },
    "tabBar": {
        // tabBar 文字顏色
        "color": "#444",
        // tabBar 文字選中顏色
        "selectedColor": "#f1f1f1",
        // tabBar 背景顏色
        "backgroundColor": "#fff",
        // tabBar 上邊框顏色
        "borderStyle": "#ccc",
        // 最多配置5個 tab, 最少2個
        "list": [
            // 必須在 pages 中存在
            "pagePath": "pages/index/index",
            // tab 名字
            "text": "homePage",
            // 建議大小 81*81 不支持網(wǎng)絡(luò)圖片
            "iconPath": "",
            "selectedIconPath": ""
        ]
    }
}
復(fù)制代碼

每一個小程序頁面也可以使用 .json 文件對本頁面的窗口表現(xiàn)進(jìn)行配置 頁面配置項(xiàng)會覆蓋 app.json 的 window 中相同的配置項(xiàng)

頁面配置

WXML 語法

數(shù)據(jù)綁定

WXML 中的動態(tài)數(shù)據(jù)均來自對應(yīng) Page 的 data ; 數(shù)據(jù)綁定使用雙大括號語法 與 Vue 基本一致 , 但是也有些許不同 , 簡單總結(jié)一下就是小程序中的 頁面里面所有的表達(dá)式都應(yīng)在 {{}} 內(nèi)部去做

<view>{{ message }}view>

<view class="item-{{ id }}">view>
復(fù)制代碼

Page({
    data: {
        message: "hello world",
        id: 123
    }
})
復(fù)制代碼

列表渲染

<view wx:for="{{ list }}" wx:key="{{ index }}">
    <text>{{ item.uname }} -- {{ item.uage }}text>
view>
復(fù)制代碼

Page({
    data: {
        list: [
            { uname: 'zs', uage: 23 },
            { uname: 'ls', uage: 24 },
            { uname: 'we', uage: 25 },
            { uname: 'mz', uage: 26 }
        ]
    }
})
復(fù)制代碼

條件渲染

<view wx:if="{{ isShow }}">是否渲染view>
<view wx:elif="{{ !isShow }}">分支判斷view>
<view wx:else>否則view>
復(fù)制代碼

WXSS

WXSS (WeiXin Style Sheets)是一套樣式語言，用于描述 WXML 的組件樣式 ; WXSS 具有 CSS 的大部分特性 , 為了更適合小程序開發(fā) , 對 CSS 也做了對應(yīng)的擴(kuò)充和修改 尺寸單位(rpx) 樣式導(dǎo)入(@import)

生命周期

小程序的生命周期分為三種, 分別是 app page component 這里咱們只說一下前面的兩種

App

• onLaunch : 監(jiān)聽小程序初始化
• onShow : 小程序啟動時和后臺切回前臺的時候被調(diào)用
• onHide : 小程序切入到后臺時調(diào)用

App({
    onLaunch() {
        console.log('onLaunch...');
    },
    onShow() {
        console.log('onShow...');
    },
    onHide() {
        console.log('onHide...');
    }
})
復(fù)制代碼

Page

• onLoad : 頁面加載時觸發(fā) , 一個頁面只會調(diào)用一次 , 可以在 onLoad 的參數(shù)中獲取當(dāng)前打開頁面所攜帶的參數(shù)
• onShow : 頁面顯示時和切入前臺時被調(diào)用
• onReady : 頁面初次渲染完成時觸發(fā)只調(diào)用一次 類似于 vue 中的 Mounted
• onHide : 頁面隱藏和切入后臺時調(diào)用, 如wx.navgationTo 或 tab 切換
• onUnload : 頁面卸載時觸發(fā) , 如 wx.redirectTo或wx.navigationBack到其他頁面時

Page({
    // 默認(rèn)獲取到的是空對象, 如果傳遞有參數(shù)就是參數(shù)對象
    onLoad(params) {
        console.log(params);
    },
    onShow() {
        console.log('page--onShow...');
    },
    onReady() {
        console.log('page--onReady...');
    },
    onHide() {
        console.log('page--onHide...');
    },
    onUnload() {
        console.log('page--onUnload...');
    }
})
復(fù)制代碼

App 和 Page 之間的順序?yàn)?/p>

啟動時 : ApponLaunch onShow Page onLoad onShow onReady

切后臺 : Page onHide App onHide

切前臺 : App onShow Page onShow

事件

相信看這個文章的人都是能夠使用 JavaScript 的 ; 所以 js 就不說了 簡單說一下事件吧 , 內(nèi)容也比較多

<button type="primary" bindtap="clickMe">click mebutton>
復(fù)制代碼

Page({
    clickMe(event) {
        console.log(event)
    }
})
復(fù)制代碼

組件

個人理解這個組件可以理解為微信又基于一些HTML做了二次封裝 ; 這里內(nèi)容比較多, 但是大部分都不是很難 , 直接放鏈接吧 , 建議文檔反復(fù)觀看并實(shí)踐

API

微信提供的接口還是比較多的 這里也不說了 詳情看這里