WeChat Mini Program Development column teaches you how to write WeChat mini programs in detail today.

History of Mini Program

What is WeChat Mini Program?

WeChat Mini Program, referred to as Mini Program. The English name is mini program. It is an application that can be used directly without downloading and installing. He achieved a dream that was within reach. Users can directly open the app by scanning or searching.

Why is WeChat Mini Program

1. WeChat has a large number of users
2. The cost of promoting apps or official accounts is too high
3. The cost of development and adaptation is low
4. Easy to trial and error on a small scale, and then iterate quickly
5. Cross-platform

History

1. January 11, 2016, Zhang Xiaolong, WeChat internally researched a new form, application number, and later changed its name to 小program.
2. Started internal testing on August 12, 2016
3. Goed online on January 9, 2017

#Environmental specifications

1. Register account

   mp.weixin.qq.com/ (Account information---Email activation---Information registration)

2. Get id

   APPID?（[登錄微信公眾平臺](https://mp.weixin.qq.com/wxamp/devprofile/get_profile?token=942994743&lang=zh_CN)?--->?開發(fā)?--->?開發(fā)設(shè)置）復(fù)制代碼

   " class="lazyload" data-width="800" data- style="max-width:90%"/>

3. Developer Tools

   WeChat Developer Tools Download

Mini Program Developer Tools

Introduction to developer tools

Shortcut keys:

1.?ctrl?+?shift?+?F?(搜索)
2.?alt?+?shift?+?F?(代碼格式化---VSCode)復(fù)制代碼

" class="lazyload" data-width="800" data- style="max-width:90%"/>

Mini program native framework

Mini program native Framework, mina framework Framework details

Mini program configuration file (write the configuration file in WeChat developer tools, there are prompts)

1. app.json Global configuration file

   配置全局文件
   
   *?pages：添加要?jiǎng)?chuàng)建的文件項(xiàng)，保存后就會自動(dòng)生成文件
   
   *?[windows](https://developers.weixin.qq.com/miniprogram/dev/reference/configuration/page.html)：設(shè)置小程序的狀態(tài)欄，導(dǎo)航條，標(biāo)題窗口顏色復(fù)制代碼

   " class="lazyload" data-width="800" data- style="max-width:90%"/>

   *?[tabBar](https://developers.weixin.qq.com/miniprogram/dev/reference/configuration/app.html)復(fù)制代碼

   " class="lazyload" data-width="800" data- style="max-width:90%"/>

2. page.json Page configuration file

3. sitemap

Template syntax of small program

WXML ---> HTML (combined with basic components, event system, and component to create page structure)

1. Equivalent to inline tags, no line breaks
2. Equivalent to block-level elements, line breaks

Data binding

{{data}}

1. Operation--> Expression (numeric calculation, string concatenation, ternary expression)

2. List loop (wx:for)

   wx:key is bound to the only attribute in the array, wx:key=this means that the array is a ordinary array, `this` is a loop item

   <view>
   ????索引：?{{?index?}}
   ????名稱：?{{?item.name?}}</view>復(fù)制代碼

3. Tag ---> Placeholder tag

4. Conditional rendering (wx:if) (wx:if, wx:elif, wx :else) (hidden attribute is presented by adding styles)

   When the label is not frequently switched, use if, and frequent switching is using hidden

Event binding

Keywords: bind (bindinput, bindtap [click event])

Get the value of the event source object:

?e.detail.value復(fù)制代碼

Get the value of the data in data:

?this.data.屬性名復(fù)制代碼

Set the value of the event source object back to data:

?this.setData({
????????num:?this.data.num?+?operation
});復(fù)制代碼

Event binding cannot pass parameters directly. Parameters must be passed through custom attributes ({{Parameters passed}}):

?<button>+</button>
?
?bandletap(e)?{
????//?console.log(e);
????const?operation?=?e.currentTarget.dataset.operation;
????this.setData({
????????num:?this.data.num?+?operation
????});
??},復(fù)制代碼

樣式

尺寸單位

當(dāng)屏幕寬度等于 750px 時(shí)，1px = 1rpx

當(dāng)屏幕寬度等于375px時(shí)， 1px =0.5rpx

樣式導(dǎo)入只支持相對路徑

選擇器（微信小程序不支持通配符）

小程序的內(nèi)置組件

小程序中常用的布局組件：

view,text,rich-text,button,image,icon,swiper,radio,checkbox等。復(fù)制代碼

1. view標(biāo)簽 ?相當(dāng)于 ?p標(biāo)簽

2. text標(biāo)簽 只能嵌套text標(biāo)簽 ?長按文字可以復(fù)制【selectable】（只有這個(gè)標(biāo)簽有這個(gè)功能） 可以對回車,空格進(jìn)行編碼 (decode)

3. image標(biāo)簽 （打包上線的大小不能超過2M，使用圖片的時(shí)候統(tǒng)一使用外網(wǎng)圖片）

   1. 圖片存在默認(rèn)的寬高（320px * 240px）

   2. mode 決定 圖片內(nèi)容 和 圖片標(biāo)簽 做適配

      scaleToFill ?默認(rèn)值 ? 不保持縱橫比，拉伸至標(biāo)簽定義的寬高

      aspectFit ?保持寬高比，保證圖片的長邊完全顯示（常用 輪播圖）

      aspectFill ? ?短邊完全顯示

      widthFix ? 寬度不變，高度自動(dòng)變化，保持原寬高比不變

      top，left，bottom，right ? 背景圖定位

   3. 小程序中的圖片 ?直接支持 懶加載

      lazy-load 會自己判斷 ?當(dāng)圖片出現(xiàn)在視口的上下三屏之內(nèi)的時(shí)候，自己開始加載圖片

4. swiper標(biāo)簽 ? ---》 輪播圖

   swiper高度 ?= ?swiper的寬度 ?* ?圖片的高度 ?/ ?原圖的寬度

   <swiper>
   ????//?圖片存在默認(rèn)寬高??320?*?240????<swiper-item><image></image></swiper-item></swiper>復(fù)制代碼

5. navigator ?導(dǎo)航組件 (塊級元素，默認(rèn)換行)

   <navigator></navigator>復(fù)制代碼

6. rich-text(富文本標(biāo)簽，將字符串解析成對應(yīng)標(biāo)簽，相當(dāng)于v-html)

   //?1?標(biāo)簽字符串<rich-text></rich-text>//?2?對象數(shù)組<rich-text></rich-text>復(fù)制代碼

7. button ?按鈕

   大?。╯ize:mini/default），顏色(type:default/primary/warn)，是否鏤空（plain），是否在文字前有加載loading（loading），開發(fā)能力（opentype）

開放能力（opentype）:

1. concat 直接打開 ?客服對話 ?功能，需要在小程序的后臺配置

   1. 將小程序的appid由測試號改為自己的appid
   2. 登錄微信小程序官網(wǎng)，添加 ?客服 ?- ? 微信

2. share 轉(zhuǎn)發(fā)當(dāng)前小程序到微信朋友中 ，不能把小程序轉(zhuǎn)發(fā)到朋友圈中

3. getPhoneNumber 獲取當(dāng)前用戶的手機(jī)號碼，結(jié)合事件來使用，不是企業(yè)的小程序賬號 沒有權(quán)限來獲取用戶的手機(jī)號碼

4. getUserInfo獲取用戶的個(gè)人信息

5. launchApp在 ?小程序 ? 中直接打開 app

6. openSetting 打開小程序內(nèi)置的授權(quán)頁面

   只會出現(xiàn)用戶點(diǎn)擊過的權(quán)限

7. feedback ? 打開小程序內(nèi)置的意見反饋頁面

8. icon

   type：類型 success，success_no_circle,info,warn,wating.success_no_circle,info,warn,waiting，cancel,downkload，search，clear

   size：大小 ? number / ?string

   color：顏色

9. radio 單選框

   <radio-group>
   ????<radio>男</radio>
   ????<radio>女</radio></radio-group><view>選中的是：?{{?gender?}}?</view>data：{
   ????gender:?""
   },
   handleChange(e)?{
   ????//?獲取單選框選中的值
   ????let?gender?=?e.detail.value;
   ????//?把值賦值給data中的數(shù)據(jù)
   ????this.setData({
   ????????gender?//?相當(dāng)于?gender：gender
   ????})
   }復(fù)制代碼

10. checkbox ?多選框

    <checkbox-group>
    ????<checkbox>{{?item.name?}}???????????</checkbox></checkbox-group><view>選中的是：?{{?checkedList?}}?</view>checkedList:[]
    handleChange(e)?{
    ????let?checkedList?=?e.detail.value;
    ????this.setData({
    ????????checkedList
    ????})
    }復(fù)制代碼

小程序的生命周期

應(yīng)用生命周期

觸發(fā)過程：

onLaunch ? ?-》 onShow

App({????//?1?應(yīng)用?第一次啟用的時(shí)候觸發(fā)
????onLaunch()?{????????//?在應(yīng)用第一次啟動(dòng)的時(shí)候?獲取用戶信息
????}????
????//?2?應(yīng)用?被用戶看到的時(shí)候觸發(fā)
????onShow()?{????????//?常用于小程序界面之間的切換
????????//?對應(yīng)用的數(shù)據(jù)或者頁面的效果進(jìn)行重置
????}????//?3?應(yīng)用?被隱藏的時(shí)候觸發(fā)
????onHide()?{????????//?暫?；蛘咔宄〞r(shí)器
????}????//?4?應(yīng)用?代碼發(fā)生報(bào)錯(cuò)的時(shí)候??執(zhí)行
????onError()?{????????//?在應(yīng)用發(fā)生代碼報(bào)錯(cuò)的時(shí)候，收集用戶的錯(cuò)誤信息，通過異步請求，將錯(cuò)誤信息發(fā)送到后臺去
????}????//?5?頁面找不到的時(shí)候就會觸發(fā)
????//?應(yīng)用第一次啟動(dòng)的時(shí)候，如果找不到第一個(gè)入口頁面，才會觸發(fā)
????onPageNotFound()?{????????//?如果頁面不存在了??通過js的方式來重新跳轉(zhuǎn)頁面??重新跳轉(zhuǎn)到第二個(gè)首頁
????????//?不能跳轉(zhuǎn)到tabbar頁面??導(dǎo)航組件類似
????????wx.navigateTo({????????????url:?"/pages/demo02/index"
????????})
????}
})復(fù)制代碼

頁面生命周期

onLoad ? -> ?onShow ?-> ?onReady

Page({????data:?{
????????
????},????onLoad:?function(options)?{????????//?onload發(fā)送異步請求來初始化頁面數(shù)據(jù)
????},????onShow:?function()?{????????//?頁面顯示加載
????},????onReady:?function()?{????????//?頁面初次渲染完成
????},????onHide:?function()?{????????//?頁面隱藏時(shí)加載??一個(gè)頁面跳轉(zhuǎn)到另外一個(gè)頁面也會觸發(fā)onHide事件
????},????onUnload:?function()?{????????//?頁面卸載??也可以通過超鏈接???關(guān)閉當(dāng)前頁面就會觸發(fā)onUnload事件
????????//?<navigator>demo01</navigator>
????????
????????//?關(guān)閉當(dāng)前頁面就代表著卸載頁面
????},????onPullDownRefresh:?function()?{????????//?監(jiān)聽用戶下拉事件??"enablePullDownRefresh":true
????????//??頁面效果的重新加載
????},????onReachBotton:?function()?{????????//?監(jiān)聽用戶上拉觸底事件???【需要讓頁面出現(xiàn)上下的滾動(dòng)才行】
????????//?常用于??上拉加載下一頁操作
????},????onShareAppMessage:?function()?{????????//?用戶點(diǎn)擊右上角轉(zhuǎn)發(fā)
????},????onPageScroll:?function()?{????????//?頁面滾動(dòng)就觸發(fā)
????},????onResize:?function()?{????????//?頁面尺寸發(fā)生變化的時(shí)候觸發(fā)???
????????//?常指?手機(jī)橫屏豎屏的時(shí)候??觸發(fā)????
????????//??app.json中添加???"pageOrientation":"auto"
????},????onTabItemTap:?function()?{????????//?1.?當(dāng)前頁面必須為tabbar頁面
????????//?2.?點(diǎn)擊的是自己的tab??item的時(shí)候才觸發(fā)
????}
})復(fù)制代碼

小程序自定義組件

步驟：

1. 創(chuàng)建

2. 聲明（那個(gè)頁面要使用自定義組件，就在那個(gè)頁面的json文件中聲明）

   {????"usingComponents":?{????????"Tabs":?"../../components/Tabs/Tabs"
   ????}
   }復(fù)制代碼

3. 使用

   <tabs></tabs>復(fù)制代碼

注意：

• 頁面的.js文件中，存放事件回調(diào)函數(shù)的時(shí)候，存放在data同層級下

• 組件的.js文件中，存放時(shí)間的回調(diào)函數(shù)的時(shí)候，存放在methods中

• 在小程序中不要直接通過this.data.x.來修改數(shù)組的值（建議先拷貝一份數(shù)組，然后再對拷貝的數(shù)組進(jìn)行修改）

  let?tabs?=?JSON.parse(JSON.stringify(this.data.tabs));let?tabs?=?this.data;復(fù)制代碼

組件之間的傳值

父組件向子組件傳值

通過 標(biāo)簽的屬性來傳遞的：

1. 父組件傳遞

   <tabs></tabs>復(fù)制代碼

2. 子組件接收

   Component({????//?里面存放的是要從父組件中接收的數(shù)據(jù)
   ????properties:?{????????//?要接受的數(shù)據(jù)的名稱
   ????????aaa:{????????????//type?接收數(shù)據(jù)的類型
   ????????????type:?String,????????????//value?默認(rèn)值
   ????????????value:?""
   ????????}
   ????}
   });復(fù)制代碼

3. 子組件使用父組件中傳遞過來的數(shù)據(jù)

   將接收過來的數(shù)據(jù)當(dāng)作本身data中的數(shù)據(jù)來使用

   <view>{{?aaa?}}</view>復(fù)制代碼

子組件向父組件傳值

通過事件來傳遞的。

tab切換欄，點(diǎn)擊切換。

1. 綁定點(diǎn)擊事件 ? 需要在methods中綁定
2. 獲取被點(diǎn)擊的索引
3. 獲取原數(shù)組
4. 對數(shù)組循環(huán)
   1. 給每一個(gè)循環(huán)項(xiàng) ?選中屬性 ? 改為 ?false
   2. 給 ? 當(dāng)前的索引 ?的 ? 項(xiàng) ?添加激活選中效果
5. 點(diǎn)擊事件觸發(fā)的時(shí)候，觸發(fā)父組件中的自定義事件同時(shí)傳遞給父組件
   1. this.triggerEvent("父組件自定義事件的名稱"，要傳遞的參數(shù))

Tabs頁面中：

<view>{{?item.name?}}</view><view>
????//?占位符??傳遞的參數(shù)會替換掉?
????<slot></slot></view>復(fù)制代碼

子組件的js文件中：(這樣寫不能改變組件內(nèi)部的數(shù)據(jù)，只是基于樣式的改變，不是基于功能)

methods:?{
????hanldeItemTap(e)?{????????//?獲取索引
????????const?{index}?=?e.currentTarget.dataset;????????//?let?{tabs}?=?this.data;
????????//?tabs.forEach((v,i)?=>?i===index?v.isActive=true:v.isActive=false);
????????//?修改data中的數(shù)據(jù)
????????//?this.setData({
????????//????tabs
????????//?})
????????
????????//?觸發(fā)父組件中的自定義事件同時(shí)傳遞給父組件
????????this.triggerEvent("itemChange",?{
????????????index
????????})
????}
}復(fù)制代碼

在父組件中的自定義組件中添加自定義事件：

<tabs>
????<block>1</block>
????<block>2</block>
????<block>3</block></tabs>復(fù)制代碼

父組件的js中：

data:?{????tabs:?[
????????{????????????id:?1,????????????name:?"首頁",????????????isActive:?true
????????},
????????{????????????id:?2,????????????name:?"待發(fā)貨",????????????isActive:?false
????????},
????????{????????????id:?3,????????????name:?"待付款",????????????isActive:?false
????????}
????]
}//?自定義事件???接收子組件傳遞的數(shù)據(jù)的handleItemChange(e)?{????//?接收傳遞過來的參數(shù)
????const?{index}?=?e.detail;????//?拿到原數(shù)組
????let?{tabs}?=?this.data;
????tabs.forEach((v,i)?=>?i===index?v.isActive=true:v.isActive=false);????//?修改data中的數(shù)據(jù)
????this.setData({
????????tabs
????})
}復(fù)制代碼

其他屬性

項(xiàng)目

1. 首頁
2. 商品列表
3. 購物車
4. 授權(quán)頁面
5. 商品搜索
6. 商品收藏
7. 商品分類
8. 商品詳情
9. 結(jié)算
10. 訂單列表
11. 個(gè)人中心
12. 意見反饋

小程序的第三方框架

1. 騰訊 wepy ?類似于 ?vue
2. 美團(tuán) ?mpvue ?類似于 ?vue
3. 京東 taro ?類似于 ?react
4. 滴滴 ? chameleon
5. uni-app ?類似于 ?vue
6. 原生框架 MINA

使用阿里字體圖標(biāo)庫

1. 在阿里圖標(biāo)官網(wǎng)，將要使用的圖標(biāo)，加入購物車

2. 將圖標(biāo)，加入項(xiàng)目

3. 小程序 pyg ? ---》 ? ?Font class（通過類的方式來使用圖標(biāo)） ? ---》 ? 查看在線鏈接

4. 在項(xiàng)目的styles文件夾中，創(chuàng)建iconfont.wxss文件

5. 打開鏈接，將鏈接中的內(nèi)容復(fù)制到iconfont.wxss文件中

6. 使用字體圖標(biāo)庫中的字體

   1. 在全局wxss文件中，引入wxss文件

      @import?"./styles/iconfont.wxss"復(fù)制代碼

   2. 使用

      <text></text>復(fù)制代碼

tabBar

在app.json中配置

tbaBar:?{????"color":?"",????//未選中的字體的顏色
????"selectedColor":?"",????//選中后的字體的顏色
????"backgroundColor":?"",??//?背景色
????"position":?"",?//定位
????"borderStyle":?"",???//邊框樣式?
????"list":?[
????????{????????????"pagePath":?"",???//?頁面的路徑
????????????"text":?"",???//?標(biāo)題的名稱
????????????"iconPath":?"",???//?未選中的圖標(biāo)路徑
????????????"selectedIconPath":?""???//?選中后的圖標(biāo)的路徑
????????}
????]
}復(fù)制代碼

頁面樣式的初始化

注意：在小程序中是不支持 通配符（*）的

在app.wxss文件中

page,view,text,swiper,swiper-item,image,navigator?{
????padding:?0;
????margin:?0;
????box-sizing:?border-box;
}


/*
????主題顏色
????1.?less?中是存在??變量??的
????2.?原生的css和wxss?也是支持?css的
*/
page?{
????--themeColor:?#eb4500;
????//?設(shè)計(jì)稿大小為?375px?時(shí),1px?=?2rpx,14px?=?28rpx
????font-size:?28rpx;
}復(fù)制代碼

使用主題顏色:

view?{
????color:?var(--themeColor);
}復(fù)制代碼

頭部

設(shè)置主題色:

"window":?{????"backgroundTextStyle":?"light",???//?字體顏色
????"navigatorBarBackgroundColor":?"#2b4500",??//?背景色
????"navigatorBarText":?"唯品會",??//?字體提示
????"navigatorBarTextStyle":?"white",??//?字體樣式????}復(fù)制代碼

使用接口數(shù)據(jù)

Page({????data:?{????????swiperList:?[]
????},????//?頁面加載事件
????onLoad:?function()?{????????/*
????????????1.?發(fā)送異步請求?獲取使用的數(shù)據(jù)
????????*/
????????wx.request({????????????url:?'',??//?接口地址
????????????success:?(result)?=>?{????????????????//?請求成功?給swiperList數(shù)組賦值
????????????????this.setData({????????????????????swiperList:?result.data.message
????????????????})
????????????}
????????????
????????});????????/*
????????????wx.request異步請求太多了就會產(chǎn)生???回調(diào)地獄???的問題
????????????
????????????解決方法:??es6中的promise
????????*/
????}
})復(fù)制代碼

請求報(bào)錯(cuò)(兩種解決方法):

1. 在小程序 詳情 界面 ?勾選上 ?不校驗(yàn)合法域名,web-view(業(yè)務(wù)域名),TLS版本以及HTTPS證書
2. 配置請求接口 ?見 ?8.7.將小程序請求的域名添加到后臺

解決回調(diào)地獄的問題(es6的promise)

在項(xiàng)目的request文件夾中創(chuàng)建index.js文件

通過封裝方法,然后調(diào)用函數(shù)傳遞參數(shù)的方式來使用

//?同時(shí)發(fā)送異步代碼的次數(shù)let?ajaxTime=0;export?const?request=(params)?=>?{
????ajaxTime++;????//?數(shù)據(jù)加載效果
????wx.showLoding({???????title:?"加載中",????????mask:?true
????});????return?new?Promise((resolve,?reject)?=>?{
????????wx.request({????????????//?解構(gòu)傳遞的參數(shù)
????????????...params,????????????success:?(result)?=>?{
????????????????resolve(result);
????????????},????????????faile:?(err)?=>?{
????????????????reject(err);
????????????},????????????//?不管是成功還是失敗都會調(diào)用這個(gè)函數(shù)
????????????complete:?()?=>?{
????????????????ajaxTime--;????????????????if(ajaxTime?===?0)?{???????????????????//?關(guān)閉正在等待的圖標(biāo)
????????????????????wx.hideLoading();
????????????????}????????????????
????????????}
????????});
????});
}復(fù)制代碼

使用封裝好的請求方法:

//??引入封裝文件?(注意:?一定要把路徑補(bǔ)全)import?{?request?}?from?'../../request/index.js';??//?這里引入的是封裝的request函數(shù)Page({????data:?{????????swiperList:?[]
????},????//?頁面加載事件
????onLoad:?function()?{????????/*
????????????1.?發(fā)送異步請求?獲取使用的數(shù)據(jù)
????????*/
????????/*
????????????wx.request({
????????????????url:?'',??//?接口地址
????????????????success:?(result)?=>?{
????????????????????//?請求成功?給swiperList數(shù)組賦值
????????????????????this.setData({
????????????????????????swiperList:?result.data.message
????????????????????})
????????????????}

????????????});
????????*/
????????/*
????????????wx.request異步請求太多了就會產(chǎn)生???回調(diào)地獄???的問題
????????????
????????????解決方法:??es6中的promise
????????*/
????????
????????//?調(diào)用方法
????????this.getSwiperList();
????????
????},????//?調(diào)用封裝好的方法
????getSwiperList()?{????????//??這里填充的數(shù)據(jù)會替換掉request方法中的...params,
????????request({?url:?'htltps://api/zbtbs/home/swiperList'});?
????????//??數(shù)據(jù)獲取成功
????????.then?(result?=>?{????????????this.setData({????????????????swiperList:?result.data.message
????????????})
????????});
????}
})復(fù)制代碼

將小程序請求的域名添加到后臺

1. 進(jìn)入 ? ?微信公眾平臺
2. 開發(fā)
3. 開發(fā)設(shè)置
4. 服務(wù)器域名
5. 添加request合法域名

獲取本地存儲的數(shù)據(jù)

web中的本地存儲 ?和 ? ?小程序中的本地存儲的區(qū)別：

1. 寫代碼的方式不一樣
   1. web中：
      1. 存儲方式：localStorage.setItem("key", ?"value");
      2. 獲取方式： localStorage.getItem("key");
   2. 小程序中：
      1. 存儲方式：wx.setStorageSync("key", ?"value");
      2. 獲取方式：wx.getStorageSync("key", ?"value");
2. 存的時(shí)候 ? 有沒有做類型轉(zhuǎn)換
   1. web：不管存的數(shù)據(jù)是什么類型的數(shù)據(jù)，最后都會通過toString（）方法轉(zhuǎn)換為字符串類型的數(shù)據(jù)
   2. 小程序：不存在數(shù)據(jù)的類型轉(zhuǎn)換

//?接口返回的數(shù)據(jù)Cates:?[],onLoad:?function(options)?{????//?獲取本地存儲中有沒有舊數(shù)據(jù)
????const?Cates?=?wx.getStorageSync("cate");????//?判斷本地是否存在
????if(!Case)?{????????//?不存在??發(fā)送請求數(shù)據(jù)
????????this.setCates();
????}else?{????????//?有舊的數(shù)據(jù)
????????//?定義數(shù)據(jù)過期的時(shí)間
????????if(Date.now()?-?Cates.time?>?1000?*?10)?{???????????//?重新發(fā)送請求
????????????this.getCates();
????????}?else?{????????????this.Cates?=?Cates.data;????????????//?渲染數(shù)據(jù)
????????}
????}
}//?獲取請求的數(shù)據(jù)getCates()?{????//?把接口的數(shù)據(jù)存儲到本地存儲中
????wx.setStorageSync("cates",?{time：Date.now(),data:?this.Cates});
}復(fù)制代碼

定義公共的url

在request.js文件中，封裝請求方法

export?const?request=(params)?=>?{????//?定義公共的url
????const?baseUrl?=?"https://api.zbsb.cn/api/public"
????return?new?Promise((resolve,?reject)?=>?{
????????wx.request({????????????//?解構(gòu)傳遞的參數(shù)
????????????...params,????????????url:?baseUrl?+?params.url;
????????????success:?(result)?=>?{
????????????????resolve(result);
????????????},????????????faile:?(err)?=>?{
????????????????reject(err);
????????????}
????????});
????});
}復(fù)制代碼

小程序支持es7的async語法

1. 在微信開發(fā)者工具中勾選es6轉(zhuǎn)es5語法

2. 在github里面下載regenerator庫中的runtime.js

3. 在小程序目錄文件下新建文件夾/lib/runtime/runtime.js，將代碼拷貝進(jìn)去

4. 在每一個(gè)需要使用async語法的頁面js文件中，引入文件

   import?regeneratorRuntime?from?'../lib/runtime/runtime';復(fù)制代碼

   使用asyn語法：

   async?getCates()?{????//?1?使用es7的async?await來發(fā)送請求
   ????const?res=await?request({url:"/categories"});
   }復(fù)制代碼

小程序url傳參

//?傳遞參數(shù)<navigator></navigator>//?拿取參數(shù)
onLoad：function(options)?{
????consol.log(options);??//?打印輸出options的值
}復(fù)制代碼

封裝tab切換組件

封裝的Tab組件中：

properties:?{????tabs:?Array,????value:?[]
}

<style>
    .tabs-title {        display: flex;
        padding: 15rpx 0;
    }
    .title-item {        display: flex;
        justify-content: center;
        align-item: center;
        flex: 1;
    }
    .active {        color: red;
        border-bottom: 1rpx solid red;
    }
</style><view>
????<view>
????????<view>???
????????????{{?item.value?}}?????????</view>
????</view>
????//?切換內(nèi)容????<view>
????????<slot></slot>
????</view></view>methods:?{????//?點(diǎn)擊事件
????handleItemTap(e)?{????????//?獲取點(diǎn)擊的索引
????????const?{index}?=?e.currentTarget.dataset;????????//?觸發(fā)父組件中的事件
????????this.triggerEvent("tabsItemChange",?{index});
????}
}復(fù)制代碼

使用封裝的Tab組件：

//bindtabsItemChange?監(jiān)聽自定義事件<tab>
????<block>1</block>
????<block>2</block>
????<block>3</block></tab>//?標(biāo)題的點(diǎn)擊事件
bindtabsItemChange(e)?{
??//?獲取被點(diǎn)擊的標(biāo)題的索引
??const?{index}?=?e.detail;
??//?修改原數(shù)組
??let?{tabs}?=?this.data;
??tabs.forEach((v,i)=>i===index?v.isActive=true:v.isActive=false);
??//?賦值到data中
??this.setData({
????tabs
??});
}復(fù)制代碼

滾動(dòng)條觸底事件（頁面上滑事件）

滾動(dòng)條觸底，加載下一頁數(shù)據(jù)

總頁數(shù) = ?Math.ceil(總條數(shù) / ?每頁顯示的數(shù)據(jù)數(shù))

//?獲取商品數(shù)據(jù)列表async?getGoodsList()?{????const?res=await?request({url:"/goods/search",data:this.QueryParams});????//?獲取總條數(shù)
????const?total?=?res.total;????//?計(jì)算總頁數(shù)
????this.totalPage?=?Math.ceil(total?/?this.QueryParams.pagesize);????//?拼接數(shù)組
????this.setData({????????goodsList:?[...this.data.goodsList,...res.goods]
????});????//?關(guān)閉下拉刷新的窗口
????wx-stopDownRefresh();
}//?滾動(dòng)條觸底事件onReachBottom()?{????//?判斷還有沒有下一頁數(shù)據(jù)
????if(this.QueryParams.pagenum?>=?this.totalPage)?{????????//?當(dāng)前頁碼?>?總頁數(shù)????沒有下一頁
????????
????}????else?{????????//?還有下一頁??當(dāng)前頁碼++?重新發(fā)送請求??數(shù)據(jù)請求回來后要對data中的數(shù)組進(jìn)行拼接
????????this.QueryParams.pagenum++；????????this.getGoodsList();
????}
}復(fù)制代碼

下拉刷新頁面

1. 觸發(fā)下拉刷新事件（需要在頁面的json文件中開啟一個(gè)配置項(xiàng)）【enablePullDownRefresh: true,backgroundTextStyle: dark】
2. 重置 ?數(shù)據(jù) ?數(shù)組
3. 重置頁碼 ? 設(shè)置為1
4. 重新發(fā)送請求
5. 數(shù)據(jù)請求成功，手動(dòng)關(guān)閉等待效果

onPullDownRefresh()?{????//?重置??數(shù)據(jù)??數(shù)組
????this.setData({????????goodsList:?[]
????});????//?重置頁碼???設(shè)置為1
?????this.QueryParams.pagenum=1;????//?重新發(fā)送請求
????this.getGoodsList();
}復(fù)制代碼

wx.showModel改變this的指向問題

wx.showModel({????title:?'提示',????content:?'您是否要?jiǎng)h除？',????success?:(res)?=>?{
????????...
????}
})復(fù)制代碼

js中的刪除

cart.splice(index,?1);??//?刪除索引為index的元素cart.filter(v?=>?v.checked);??//?挑選出cart數(shù)組中checked為true的值復(fù)制代碼

彈窗的封裝

在asyncWX.js文件中

export?const?showModel=({content})?=>?{????return?new?Promise((resolve,reject)?=>?{
????????wx.showModel({????????????title:?'提示',????????????content:?content,????????????success?:(res)?>?{
????????????????resolve(res);
????????????},????????????fail?:(err)?=>?{
????????????????reject(err);
????????????}
????????})
????})
}復(fù)制代碼

使用

import?{showModel}?from?'../../utils/asyncWx.js';async?showTips()?{????const?res=await?showModel({content:?'您是否要?jiǎng)h除？'})????if(res.confirm)?{
???????cart.splice(index,?1);????????this.setData(cart);
????}
}復(fù)制代碼

獲取緩存中的數(shù)據(jù)

wx.getStorageSync("address");復(fù)制代碼

微信支付

1. 企業(yè)賬號
2. 在企業(yè)賬號的小程序后臺中 ?必須 ?給 ?開發(fā)者添加上白名單
   1. 一個(gè)AppID可以綁定多個(gè)開發(fā)者
   2. 綁定之后的開發(fā)者就擁有了開發(fā)者的權(quán)限了
3. 支付按鈕
   1. 先判斷緩存中有沒有token
   2. 沒有 ?跳轉(zhuǎn)到授權(quán)頁面 ? 獲取用戶的 token 值
   3. 有 ?執(zhí)行支付操作

流程：創(chuàng)建訂單，準(zhǔn)備預(yù)支付，發(fā)起微信支付，查詢訂單

一，獲取token

handleOrderPay()?{???try?{????????//?1.?判斷緩存中有沒有token值
????????const?token?=?wx.getStorageSync("token");????????//?2.?判斷
????????if(!token)?{????????????//?跳轉(zhuǎn)到??授權(quán)?頁面
????????????wx.navigateTo({????????????????url:?"/page/auth/index"
????????????})????????????return;
????????}????????//?3.?創(chuàng)建訂單
????????//?準(zhǔn)備創(chuàng)建訂單需要的參數(shù)
????????const?header?=?{Authorization:token};????????//?準(zhǔn)備請求體參數(shù)
????????const?order_price?=?this.data.totalPrice;???//?訂單總價(jià)格
????????const?consignee?=?this.data.address.all;??//?詳細(xì)地址
????????let?goods?=?[];????????const?cart?=?this.data.cart;
????????goods.forEach(v?=>?goods.push({????????????goods_Id:?v.goods_Id,?//?商品的id
????????????goods_number:?v.goods_number,?//商品數(shù)量
????????????goods_price:?v.goods_price??//?商品的單價(jià)
????????}))????????const?orderParams?=?{order_price,consignee,goods}????????//?4.?準(zhǔn)備發(fā)送請求??創(chuàng)建訂單??獲取訂單編號
????????const?{order_number}=await?request({url:?????????????????????"/order/create"},method:"POST",data:orderParams,head:head});????????//?5.?發(fā)起?預(yù)支付接口
????????const?{pay}=await?request({url:"/order/req_unifiedorder",method:"POST",head,data:{order_number}});????????//?6.?發(fā)起微信支付
????????await?requestPayment(pay);????????//?7.?查詢后臺??訂單狀態(tài)是否成功
????????const?res=await?request(url:"/orders/chkOrder",method:"POST",head,data:{order_number}});????????//?提示支付成功
????????await?showToast({title:"支付成功"});????????//?手動(dòng)刪除?緩存中支付成功購物車的數(shù)據(jù)
????????let?newCart?=?wx.getStorageSync("cart");????????//?過濾出沒有被選中的數(shù)據(jù)
????????newCart?=?newCart.filter(v?=>?!v.checked);
????????wx.setStorageSync("cart",newCart);????????//?8.支付成功??跳轉(zhuǎn)到訂單頁面
????????wx.navigateTo({????????????url:?'/page/order/index'
????????})
???}?catch(err)?{???????await?showToast({title:"支付失敗"});
???}
????
}復(fù)制代碼

page/autn/index頁面中：

<button>
????獲取授權(quán)</button>復(fù)制代碼

//?獲取用戶信息//?encryptedData??//?rawData//?iv//?signatureasync?handleGetUserInfo(e)?{????try?{????????//?獲取用戶信息
????????const?{?encryptedData,rawData,iv,signature?}?=?e.detail;????????//?獲取小程序登錄之后的token值??在asyncWX.js中封裝token請求方法
????????//?wx.login({
????????//?????timeout:?1000,
????????//????success:?(result)?=>?{
????????//??????cost?{?code?}?=?result;???
????????//????}
????????//?})
????????const?{code}?=?await?login();????????const?loginParams?=?{?encryptedData,?rawData,?iv,?signature,?code?}????????//?發(fā)送請求??獲取用戶的token
????????const?{token}=await?request(url:?'/user/wxlogin',data:?loginParams,methods:?????????"post");????????//?將獲取到的token存儲到緩存中，同時(shí)跳轉(zhuǎn)回上一個(gè)界面
????????wx.getStroageSync("token",?token);
????????wx.navigateBack({????????????data:?1?//?返回上一層
????????})????
????}?catch(err)?{????????console.log(err);
????}
}復(fù)制代碼

在asyncWX.js文件中封裝支付方法：

export?const?requestPayment=(pay)?=>?{????return?new?Promise((resolve,reject){
????????wx.request({
???????????...pay,???????????success:?(result)?=>?{
????????????????resolve(result);
???????????},???????????fail:?(err)?=>?{
???????????????reject(err);
???????????}
????????})???????????????????
????})
}復(fù)制代碼

二，準(zhǔn)備預(yù)支付（獲取參數(shù) pay）

三，發(fā)起微信支付（提交pay參數(shù)）

四，查詢訂單

五，刪除緩存中已經(jīng)被選中購買的商品

六，刪除后的購物車數(shù)據(jù) 填充會緩存

七，跳轉(zhuǎn)頁面

圖片上傳（wx.uploadFile）

圖片上傳的時(shí)候，存儲上傳的圖片的時(shí)候，要先拼接上之前的圖片。

chooseImage：[],

this.setData({

? ?chooseImage: [上傳之前的圖片組, 上傳的圖片組]

? ? chooseImage: [...this.data.chooseImage, ...chooseImage]

})

上傳文件的api不支持多個(gè)文件同時(shí)上傳

解決方法：遍歷數(shù)組 ?挨個(gè)上傳

wx.uploadFile({????url:?'',?//?圖片要上傳到哪里
????filePath:?'',?//?被上傳文件的路徑
????name:?'',??//?上傳的文件的名稱??后臺通過定義的上傳的名稱來獲取名稱
????formData:?{},?//?順帶的文本信息})復(fù)制代碼

項(xiàng)目發(fā)布

注意：發(fā)布之前記得關(guān)閉詳情界面的 ?不校驗(yàn)合法域名

上傳的每個(gè)文件大小不超過2M，總大小不超過10M。

上傳：

1. 版本號
   1. 第一個(gè)數(shù)字（大版本的更新）
   2. 第二個(gè)數(shù)字（重要功能更新）
   3. 第三個(gè)數(shù)字（最小功能，小bug，小補(bǔ)?。?/li>
2. less文件是不會被打包上傳的
3. 上傳成功后的小程序還是一個(gè)體驗(yàn)版本的小程序，如果需要將體驗(yàn)版本的小程序變成線上版本的小程序，就在 微信公眾平臺將提交的體驗(yàn)本的小程序，提交審核（審核的時(shí)間大概是一個(gè)小時(shí)）。

小程序插件

1. 小程序開發(fā)助手

2. 安裝easy less插件在vscode中配置(ctrl + shift + p 然后輸入 setting，然后添加上如下配置)：

   "less.compile":?{????"outExit":?".wxss"}復(fù)制代碼

相關(guān)免費(fèi)學(xué)習(xí)推薦：微信小程序開發(fā)

The above is the detailed content of Don't worry, I'll teach you step by step how to write WeChat mini programs. For more information, please follow other related articles on the PHP Chinese website!