微信小程序開發（超詳細保姆式教程）

介紹：

微信里面app，16年推出
競品：支付寶小程序，釘釘，美團，頭條，抖音qq小程序
優點
1，在微信里面自由分享，2，不用下載app，3,能快速的開發，使用微信的api接口

開發者
內存，源碼，圖片，存儲，接口與數據都有限制

一，注冊微信小程序

如果你還沒有微信公眾平臺的賬號，請先進入微信公眾平臺首頁，點擊 “立即注冊” 按鈕進行注冊。注冊的賬號類型可以是訂閱號、服務號、小程序以及企業微信，我們選擇 “小程序” 即可。

接著填寫賬號信息，需要注意的是，填寫的郵箱必須是未被微信公眾平臺注冊、未被個人微信號綁定的郵箱，而且每個郵箱僅能申請一個小程序。

激活郵箱之后，選擇主體類型為 “個人類型”，并按要求登記主體信息。主體信息提交后不可修改，該主體將成為你使用微信公眾平臺各項服務和功能的唯一法律主體與締約主體，在后續開通其他業務功能時不得變更或修改。

二，微信開發者工具

下載微信web開發者工具，根據自己的操作系統下載對應的安裝包進行安裝即可。

1，新建項目

![在這里插入圖片描述](https://img-blog.csdnimg.cn/bf3c52e9bdc643ab9b1370e5ab87fc0f.png

2，頁面介紹

3，項目組成

4，page.json 文件

pages 注冊頁面
window 窗口信息

5，新建頁面

在pages文件夾右鍵建立新的文件夾

在文件中右鍵新建頁面

哪個page在最上面，默認顯示哪頁

json要求嚴格語法，不能有多余的注釋和逗號

這樣新的頁面就建好了我們來看看都有什么

ceshi.wxml 模板文件
ceshi.js 業務邏輯
ceshi.wxss 樣式
ceshi.json 頁面配置

把新建的文件路徑調到最上面那就是主頁了，意思就是，第一個路徑就是首頁的路徑!

頁面配置：

"enablePullDownRefresh": true, 允許下拉刷新 "backgroundTextStyle": "dark", 背景文字顏色 "backgroundColor":"#f70", 背景顏色 "usingComponents":{} 組件

三，基本語法

小程序的模板語法約等于vue的模板語法

1，文本渲染

{{ msg}}可以執行簡單的js表達式 {{2+3}} {{msg.length}}

2，條件渲染

wx:if="" wx:elif="" wx:else

3，列表渲染

wx:for="{{list}}" wx:key="index"{{item}}{{index}}

4，自定義列表渲染

定義item與index的名稱 wx:for="{{list}}}" wx:for-item="myitem" wx:for-index="myidx" {{myidx}} {{myitem}}

5，導入

（不常用）

import
只能導入template內容
template/utils.wxml
< template name=“userCart”> 用戶名：{{name}} < /temlate>
home.wxml
< import src=“/template/utils.wxml”>
< tempate is=“userCart” data=“{{…u1}}”>

include
只能導入非template內容
template/foot.wxml < view> {{內容}} </ view>
home.wxml < include src=“/template/foot.wxml”>

6，wxss

默認單位是rpx 750rpx 等于一個屏幕的寬 375就是50%的寬

7，事件

bindInput 表單輸入時 bindconfirm 表單輸入確認 bindtap 點擊時候

8，內置組件

view 組件塊組件 text 組件行內組件 button 組件按鈕 input 組件表單

9，事件的傳參

<button data-msg="xxx" bindtap="tapHd"> 獲取事件的參數 e.target.dataset.msg

10，表單的綁定

<input value="{{s1}}" bindinput="inputHd"> inputHd(e){this.setData({s1:e.detail.value}) } 表單的值獲取：e.detail.value

11，內置的api

顯示提示

• showToast

本地存儲

• wx.setStorageSync(key,value)

本地取

• wx.getStorageSync(key)
• wx.request 網絡請求

12，生命周期

onLoad 頁面加載完畢 onPullDownRefresh 下拉刷新 onReachBottom 觸底更新

四，頁面切換

1，< navigator></ navigator >標簽

這是最常見的一種跳轉方式,相當于html里的a標簽.但需要注意的是 該方法不能跳轉tabbar頁面.

格式為:

<navigator url="........"></navigator><navigator url="/pages/event/event">前往event</navigator>

2，wx.navigateTo.

通過構造js函數,在函數中調用該接口可實現頁面跳轉的效果.但該接口同樣不能跳轉tabbar頁面.跳轉后左上角有返回小箭頭,點擊可返回原本頁面.

格式為:

//<!**wxml文件**> <view class="select_calculator" bindtap="next_calculator"> //js文件 next_calculator:function () {wx.navigateTo({url: '/pages/calculator/calculator',})

3，wx.redirectTo.

關閉當前頁面，跳轉到應用內的某個頁面(不能跳轉tabbar頁面)。類似于html中的 window.open(‘…’);
跳轉后左上角出現返回小箭頭,點擊后可返回原本頁面.

格式為:

<view><navigator open-type="redirect" url="/pages/event/event">跳轉并替換</navigator> </view>

4，wx.switchTab.

跳轉到 tabBar 頁面，并關閉其他所有非 tabBar 頁面；該方法只能跳轉tabbar頁面.

wxml

js

post_calculator:function () {wx.switchTab({url: '/pages/calculator/calculator',})},})

5，wx.reLaunch.

關閉所有頁面，打開到應用內的某個頁面。 跟 wx.redirectTo 一樣左上角不會出現返回箭頭，但兩者卻不完全相同；

格式為:

<view><navigator open-type="reLaunch">重啟</navigator> </view>

五 ，tabBar 全局配置

tabBar 是移動端應用常見的頁面效果， 用于實現多頁面 的快速切換 。
小程序中通常將其分為：
1，底部 tabBar
2，頂部 tabBar

1， 注意：

tabBar中只能配置最少 2 個、最多 5 個 tab 頁簽

當渲染頂部 tabBar 時，不顯示 icon，只顯示文本

2，tabBar 的 6 個組成部分

① backgroundColor： tabBar 的背景色② selectedIconPath： 選中時的圖片路徑③ borderStyle： tabBar 上邊框的顏色④ iconPath： 未選中時的圖片路徑⑤ selectedColor： tab 上的文字選中時的顏色⑥ color： tab 上文字的默認（未選中）顏色

3. tabBar 節點的配置項

4. 每個 tab 項的配置選項

5，全局配置 - 案例：配置 tabBar

配置 tabBar 選項

① 打開 app.json 配置文件，和 pages、window 平級，新增 tabBar 節點
② tabBar 節點中，新增 list 數組 ，這個數組中存放的，是每個 tab 項的配置對象
③ 在 list 數組中， 新增每一個 tab 項的配置對象 。對象中包含的屬性如下： pagePath 指定當前 tab 對應的頁面路徑 【 必填 】
text 指定當前 tab 上按鈕的文字【 必填】
iconPath 指定當前 tab 未選中時候的圖片路徑【可選】
selectedIconPath 指定當前 tab 被選中后高亮的圖片路徑【可選】

代碼如下：

{"pages": ["pages/hone/hone","pages/Profile/Profile","pages/experience/experience","pages/skill/skill","pages/index/index","pages/logs/logs"],"tabBar":{"color": "#777","selectedColor": "#1cb9ce","list":[{"pagePath": "pages/hone/hone","text":"簡歷信息","iconPath": "/pages/img/icon08.png","selectedIconPath": "/pages/img/icon08.png"},{"pagePath": "pages/skill/skill","text":"個人技能","iconPath": "/pages/img/icon04.png","selectedIconPath": "/pages/img/icon04.png"},{"pagePath": "pages/experience/experience","text":"項目經歷","iconPath": "/pages/img/icon02.png","selectedIconPath": "/pages/img/icon02.png"},{"pagePath": "pages/Profile/Profile","text":"自我評價","iconPath": "/pages/img/icon06.png","selectedIconPath": "/pages/img/icon06.png"}]},"window": {"backgroundTextStyle": "light","navigationBarBackgroundColor": "#fff","navigationBarTitleText": "Weixin","navigationBarTextStyle": "black"},"style": "v2","sitemapLocation": "sitemap.json" }

六，頁面傳參

wxml 代碼如下：

<view><navigator open-type="navigate" url="/pages/event/event?name=mumu&age=18">事件event</navigator> </view> <view><navigator open-type="redirect" url="/pages/event/event?name=曾慶林&age=33">跳轉并替換</navigator> </view>

js 代碼如下：

/*** 頁面的初始數據*/data: {num:null,},goEvent(e){// 獲取到傳遞的參數typevar type = e.target.dataset.type;// 如果type值是redirect 替換跳轉if(type=="redirect"){wx.redirectTo({url: "/pages/event/event",})}else{// 否則就普通跳轉wx.navigateTo({url: '/pages/event/event',})}},/*** 生命周期函數--監聽頁面加載*/onLoad(options) {// 更新導航欄的標題wx.setNavigationBarTitle({title: '導航與跳轉',})},/*** 生命周期函數--監聽頁面顯示*/onShow() {this.setData({num:app.globalData.num})},

頁面傳遞的參數

<view>頁面傳遞的參數</view> <view> 姓名：{{name}}，年齡{{age}} </view>

七，封裝 request

文件路徑： utils/request.js

// 基礎的url const URI = {baseURL:"http://dida100.com" } // {name:"mumu",age:18} => name=mumu&age=18 function tansParams(obj){var str = "";for(var k in obj){str+=k+"="+obj[k]+"&";}//移除最后一個&return str.slice(0,-1); } function request(option){var url = option.url;// 01 可以添加baseURL// 是不是以http開頭的，是用url不是加上baseURLurl = url.startsWith("http")?url:URI.baseURL+url;// 選項里面有params（get傳入的參數）if(option.params){// 如果有參數，把參數轉換為url編碼形式加入url+="?"+tansParams(option.params);}// 02 可以添加請求頭var header = option.header||{};header.Authorization ="Bearer "+wx.getStorageSync('token');// 03 可以添加加載提示if(option.loading){wx.showToast({title: option.loading.title,icon:option.loading.icon,})}// 返回一個promisereturn new Promise((resolve,reject)=>{wx.request({// 請求的地址如果一http開頭直接用url不是http開頭添加我們 baseUrLurl: url,method:option.method||"GET",//請求的方法 默認getdata:option.data, //post出入的參數header,success(res){// 請求成功resolve(res.data);},fail(err){// 04 對錯誤進行處理wx.showToast({title:"加載失敗",icon:"none"})// 請求失敗reject(err);},complete(){// 關閉加載提示wx.hideToast();}})}) } // 定義get簡易方法 request.get= (url,config)=>{return request({url,method:"get",...config}) } // 定義post簡易方法 request.post= (url,data,config)=>{return request({url,method:"post",data,...config}) } // 導入request module.exports={request}

八， 內置api

顯示提示 showToast 本地存儲 wx.setStorageSync(key,value) 本地取 wx.getStorageSync(key) wx.request 網絡請求

九，Vant Weapp 輕量、可靠的小程序 UI 組件庫

介紹

Vant 是一個輕量、可靠的移動端組件庫，于 2017 年開源。
目前 Vant 官方提供了 Vue 2 版本、Vue 3 版本和微信小程序版本，并由社區團隊維護 React 版本和支付寶小程序版本。

1，安裝

步驟一 通過 npm 安裝

使用 npm 構建前，請先閱讀微信官方的 npm 支持

# 通過 npm 安裝 npm i @vant/weapp -S --production# 通過 yarn 安裝 yarn add @vant/weapp --production# 安裝 0.x 版本 npm i vant-weapp -S --production

步驟二 修改 app.json

開發者工具創建的項目，miniprogramRoot 默認為 miniprogram，package.json 在其外部，npm 構建無法正常工作。
需要手動在 project.config.json 內添加如下配置，使開發者工具可以正確索引到 npm 依賴的位置。

{..."setting": {..."packNpmManually": true,"packNpmRelationList": [{"packageJsonPath": "./package.json","miniprogramNpmDistDir": "./miniprogram/"}]} }

注意：

由于目前新版開發者工具創建的小程序目錄文件結構問題，npm構建的文件目錄為miniprogram_npm，并且開發工具會默認在當前目錄下創建miniprogram_npm的文件名，所以新版本的miniprogramNpmDistDir配置為 ‘./’ 即可

步驟四 構建 npm 包

打開微信開發者工具，點擊 工具 -> 構建 npm，并勾選 使用 npm 模塊 選項，構建完成后，即可引入組件。

步驟五 typescript 支持

如果你使用 typescript 開發小程序，還需要做如下操作，以獲得順暢的開發體驗。

安裝 miniprogram-api-typings

# 通過 npm 安裝 npm i -D miniprogram-api-typings# 通過 yarn 安裝 yarn add -D miniprogram-api-typings

在 tsconfig.json 中增加如下配置，以防止 tsc 編譯報錯。
請將path/to/node_modules/@vant/weapp修改為項目的 node_modules 中 @vant/weapp 所在的目錄。

{..."compilerOptions": {..."baseUrl": ".","types": ["miniprogram-api-typings"],"paths": {"@vant/weapp/*": ["path/to/node_modules/@vant/weapp/dist/*"]},"lib": ["ES6"]} }

2，使用

引入組件

以 Button 組件為例，只需要在app.json或index.json中配置 Button 對應的路徑即可。
所有組件文檔中的引入路徑均以 npm 安裝為例，如果你是通過下載源代碼的方式使用 @vant/weapp，請將路徑修改為項目中 @vant/weapp 所在的目錄。

// 通過 npm 安裝 // app.json "usingComponents": {"van-button": "@vant/weapp/button/index" } // 通過下載源碼使用 es6版本 // app.json "usingComponents": {"van-button": "path/to/@vant/weapp/dist/button/index" } // 通過下載源碼使用 es5版本 // app.json "usingComponents": {"van-button": "path/to/@vant/weapp/lib/button/index" }

使用組件

引入組件后，可以在 wxml 中直接使用組件

<van-button type="primary">按鈕</van-button>

3，其他

在開發者工具中預覽示例小程序

# 將項目克隆到本地 git clone git@github.com:youzan/vant-weapp.git# 安裝項目依賴 cd vant-weapp && npm install# 執行組件編譯 npm run dev

接著打開微信開發者工具，導入example目錄的項目就可以預覽示例了。