微信小程序的示例簡介

小編給大家分享一下微信小程序的示例簡介，相信大部分人都還不怎么了解，因此分享這篇文章給大家參考一下，希望大家閱讀完這篇文章后大有收獲，下面讓我們一起去了解一下吧！

什么是微信小程序？

微信小程序，簡稱小程序。英文名mini program，是一種不需要下載安裝就可以直接使用的應用。他實現了觸手可及的夢想。用戶掃一掃或搜一下就可以直接打開應用。

為什么是微信小程序

1. 微信有海量用戶

2. 推廣app或公眾號成本太高

3. 開發適配成本低

4. 容易小規模試錯，然后快速迭代

5. 跨平臺

歷史

1. 2016年1月11日，張小龍，微信內部研究新的形態，應用號，后改名小程序。

2. 2016年8月12日，開始內測

3. 2017年1月9日，上線

#環境規范

1. 注冊賬號

   mp.weixin.qq.com/  (帳號信息 --- 郵箱激活 --- 信息登記)

2. 獲取id

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

   

3. 開發者工具

   微信開發者工具下載

小程序開發者工具

  開發者工具介紹

  快捷鍵：

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

小程序原生框架

小程序的原生框架，mina框架   框架詳情

小程序配置文件（寫配置文件在微信開發者工具工具寫，有提示）

1. app.json   全局配置文件

   配置全局文件
   
   * pages：添加要創建的文件項，保存后就會自動生成文件
   
   * [windows](https://developers.weixin.qq.com/miniprogram/dev/reference/configuration/page.html)：設置小程序的狀態欄，導航條，標題窗口顏色復制代碼

   

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

   

2. page.json   頁面配置文件

3. sitemap

小程序的模板語法

WXML   --->   HTML   (結合基礎組件，事件系統，構件出頁面結構)

1. 相當于 ，行內標簽，不會換行

2. 相當于，塊級元素，會換行

數據綁定

{{ 數據 }}

1. 運算 --> 表達式（ 數值計算，字符串拼接，三元表達式）

2. 列表循環 （wx:for）

   wx:key綁定的是數組中的為唯一屬性，wx:key=this表示數組是普通數組，`this`是循環項

   <view wx:for="{{ person }}" wx:for-item="item" wx:for-index="index"wx:key="id">
       索引： {{ index }}
       名稱： {{ item.name }}</view>復制代碼

3. 標簽   --->   占位標簽

4. 條件渲染（wx:if）（wx:if, wx:elif, wx:else） (hidden  屬性是通過添加樣式的方式來呈現的)

   當標簽不是頻繁的切換使用if，頻繁切換使用hidden

事件綁定

關鍵字：bind （bindinput，bindtap【點擊事件】）

獲取事件源對象的值：

 e.detail.value復制代碼

獲取data中數據的值：

 this.data.屬性名復制代碼

將事件源對象的值設置回data中：

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

事件綁定是不能直接傳參，要通過自定義屬性的方式傳參（ {{ 傳遞的參數}} ）：

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

樣式

尺寸單位

當屏幕寬度等于 750px 時，1px = 1rpx

當屏幕寬度等于375px時， 1px =0.5rpx

樣式導入只支持相對路徑

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

小程序的內置組件

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

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

1. view標簽  相當于  p標簽

2. text標簽 只能嵌套text標簽  長按文字可以復制【selectable】（只有這個標簽有這個功能） 可以對回車,空格進行編碼 (decode)

3. image標簽 （打包上線的大小不能超過2M，使用圖片的時候統一使用外網圖片）

1. 圖片存在默認的寬高（320px * 240px）

2. mode 決定 圖片內容 和 圖片標簽 做適配

   scaleToFill  默認值   不保持縱橫比，拉伸至標簽定義的寬高

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

   aspectFill    短邊完全顯示

   widthFix   寬度不變，高度自動變化，保持原寬高比不變

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

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

   lazy-load 會自己判斷  當圖片出現在視口的上下三屏之內的時候，自己開始加載圖片

4. swiper標簽   ---》 輪播圖

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

   <swiper autoplay interval="1000" circular indicator-dots>
       // 圖片存在默認寬高  320 * 240    <swiper-item><image model="widthFix" src="" /></image></swiper-item></swiper>復制代碼

5. navigator  導航組件 (塊級元素，默認換行)

   <navigator url="/pages/homepage/index" open-type="navigate"></navigator>復制代碼

6. rich-text(富文本標簽，將字符串解析成對應標簽，相當于v-html)

   // 1 標簽字符串<rich-text nodes="{{ html }}"></rich-text>// 2 對象數組<rich-text nodes="{{ html.model }}"></rich-text>復制代碼

7. button  按鈕

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

開放能力（opentype）:

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

1. 將小程序的appid由測試號改為自己的appid

2. 登錄微信小程序官網，添加  客服  -   微信

2. share 轉發當前小程序到微信朋友中 ，不能把小程序轉發到朋友圈中

3. getPhoneNumber 獲取當前用戶的手機號碼，結合事件來使用，不是企業的小程序賬號 沒有權限來獲取用戶的手機號碼

4. getUserInfo獲取用戶的個人信息

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

6. openSetting 打開小程序內置的授權頁面

   只會出現用戶點擊過的權限

7. feedback   打開小程序內置的意見反饋頁面

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 bindchange="handleChange">
       <radio color="red" value="male">男</radio>
       <radio color="red" value="female">女</radio></radio-group><view>選中的是： {{ gender }} </view>data：{
       gender: ""
   },
   handleChange(e) {
       // 獲取單選框選中的值
       let gender = e.detail.value;
       // 把值賦值給data中的數據
       this.setData({
           gender // 相當于 gender：gender
       })
   }復制代碼

10. checkbox  多選框

    <checkbox-group bindchange="handleChange">
        <checkbox value="{{ item.value }}" wx:for="{{ list }}" wx:key="id">{{ item.name }}           </checkbox></checkbox-group><view>選中的是： {{ checkedList }} </view>checkedList:[]
    handleChange(e) {
        let checkedList = e.detail.value;
        this.setData({
            checkedList
        })
    }復制代碼

小程序的生命周期

應用生命周期

觸發過程：

onLaunch    -》 onShow

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

頁面生命周期

onLoad   ->  onShow  ->  onReady

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

小程序自定義組件

步驟：

1. 創建

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

   {    "usingComponents": {        "Tabs": "../../components/Tabs/Tabs"
       }
   }復制代碼

3. 使用

   <Tabs></Tabs>復制代碼

注意：

• 頁面的.js文件中，存放事件回調函數的時候，存放在data同層級下

• 組件的.js文件中，存放時間的回調函數的時候，存放在methods中

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

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

組件之間的傳值

父組件向子組件傳值

通過 標簽的屬性來傳遞的：

1. 父組件傳遞

   <Tabs aaa="123"></Tabs>復制代碼

2. 子組件接收

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

3. 子組件使用父組件中傳遞過來的數據

   將接收過來的數據當作本身data中的數據來使用

   <view>{{ aaa }}</view>復制代碼

子組件向父組件傳值

通過事件來傳遞的。

tab切換欄，點擊切換。

1. 綁定點擊事件   需要在methods中綁定

2. 獲取被點擊的索引

3. 獲取原數組

4. 對數組循環

1. 給每一個循環項  選中屬性   改為  false

2. 給   當前的索引  的   項  添加激活選中效果

5. 點擊事件觸發的時候，觸發父組件中的自定義事件同時傳遞給父組件

1. this.triggerEvent("父組件自定義事件的名稱"，要傳遞的參數)

Tabs頁面中：

<view 
      wx:for="{{tabs}}" 
      wx:key="id" 
      class="title_item {{item.isActive?'active':''}}"
      bindtap="hanldeItemTap"
      data-index="{{index}}">{{ item.name }}</view><view class="tabs_content">
    // 占位符  傳遞的參數會替換掉 
    <slot></slot></view>復制代碼

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

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中的數據
        // this.setData({
        //    tabs
        // })
        
        // 觸發父組件中的自定義事件同時傳遞給父組件
        this.triggerEvent("itemChange", {
            index
        })
    }
}復制代碼

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

<Tabs binditemChange="handleItemChange">
    <block wx:if="{{tabs[0].isActive}}">1</block>
    <block wx:if="{{tabs[1].isActive}}">2</block>
    <block wx:else>3</block></Tabs>復制代碼

父組件的js中：

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

其他屬性

項目

1. 首頁

2. 商品列表

3. 購物車

4. 授權頁面

5. 商品搜索

6. 商品收藏

7. 商品分類

8. 商品詳情

9. 結算

10. 訂單列表

11. 個人中心

12. 意見反饋

小程序的第三方框架

1. 騰訊 wepy  類似于  vue

2. 美團  mpvue  類似于  vue

3. 京東 taro  類似于  react

4. 滴滴   chameleon

5. uni-app  類似于  vue

6. 原生框架 MINA

使用阿里字體圖標庫

1. 在阿里圖標官網，將要使用的圖標，加入購物車

2. 將圖標，加入項目

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

4. 在項目的styles文件夾中，創建iconfont.wxss文件

5. 打開鏈接，將鏈接中的內容復制到iconfont.wxss文件中

6. 使用字體圖標庫中的字體

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

   @import "./styles/iconfont.wxss"復制代碼

2. 使用

   <text class="iconfont icon-shoucang"></text>復制代碼

tabBar

在app.json中配置

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

頁面樣式的初始化

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

在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;
    // 設計稿大小為 375px 時,1px = 2rpx,14px = 28rpx
    font-size: 28rpx;
}復制代碼

使用主題顏色:

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

頭部

設置主題色:

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

使用接口數據

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

請求報錯(兩種解決方法):

1. 在小程序 詳情 界面  勾選上  不校驗合法域名,web-view(業務域名),TLS版本以及HTTPS證書

2. 配置請求接口  見  8.7.將小程序請求的域名添加到后臺

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

在項目的request文件夾中創建index.js文件

通過封裝方法,然后調用函數傳遞參數的方式來使用

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

使用封裝好的請求方法:

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

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

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

1. 進入    微信公眾平臺

2. 開發

3. 開發設置

4. 服務器域名

5. 添加request合法域名

獲取本地存儲的數據

web中的本地存儲  和    小程序中的本地存儲的區別：

1. 寫代碼的方式不一樣

1. 存儲方式：wx.setStorageSync("key",  "value");

2. 獲取方式：wx.getStorageSync("key",  "value");

3. 存儲方式：localStorage.setItem("key",  "value");

4. 獲取方式： localStorage.getItem("key");

5. web中：

6. 小程序中：

2. 存的時候   有沒有做類型轉換

1. web：不管存的數據是什么類型的數據，最后都會通過toString（）方法轉換為字符串類型的數據

2. 小程序：不存在數據的類型轉換

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

定義公共的url

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

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

小程序支持es7的async語法

1. 在微信開發者工具中勾選es6轉es5語法

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

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

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

   import regeneratorRuntime from '../lib/runtime/runtime';復制代碼

   使用asyn語法：

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

小程序url傳參

// 傳遞參數<navigator wx:for="Cates" wx:for-item="item" wx:for-index="index" wx:key="id" url="/pages/goods/index?cid={{item.cid}}"></navigator>// 拿取參數
onLoad：function(options) {
    consol.log(options);  // 打印輸出options的值
}復制代碼

封裝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 class="tabs">
    <view class="tabs-title">
        <view wx:for="{{ tabs }}" wx:key="id" 
        class="title-item {{item.isActive?'active':''}}"
        bindtap="handleItemTap"  data-index="{{ index }}"
        >   
            {{ item.value }}         </view>
    </view>
    // 切換內容    <view class="tabs-content">
        <slot></slot>
    </view></view>methods: {    // 點擊事件
    handleItemTap(e) {        // 獲取點擊的索引
        const {index} = e.currentTarget.dataset;        // 觸發父組件中的事件
        this.triggerEvent("tabsItemChange", {index});
    }
}復制代碼

使用封裝的Tab組件：

//bindtabsItemChange 監聽自定義事件<Tab tabs="{{ tabs }}" bindtabsItemChange="handelTabsItemChange">
    <block wx:if="{{tabs[0].isActive}}">1</block>
    <block wx:if="{{tabs[1].isActive}}">2</block>
    <block wx:if="{{tabs[2].isActive}}">3</block></Tab>// 標題的點擊事件
bindtabsItemChange(e) {
  // 獲取被點擊的標題的索引
  const {index} = e.detail;
  // 修改原數組
  let {tabs} = this.data;
  tabs.forEach((v,i)=>i===index?v.isActive=true:v.isActive=false);
  // 賦值到data中
  this.setData({
    tabs
  });
}復制代碼

滾動條觸底事件（頁面上滑事件）

滾動條觸底，加載下一頁數據

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

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

下拉刷新頁面

1. 觸發下拉刷新事件（需要在頁面的json文件中開啟一個配置項）【enablePullDownRefresh: true,backgroundTextStyle: dark】

2. 重置  數據  數組

3. 重置頁碼   設置為1

4. 重新發送請求

5. 數據請求成功，手動關閉等待效果

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

wx.showModel改變this的指向問題

wx.showModel({    title: '提示',    content: '您是否要刪除？',    success :(res) => {
        ...
    }
})復制代碼

js中的刪除

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

彈窗的封裝

在asyncWX.js文件中

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

使用

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

獲取緩存中的數據

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

微信支付

1. 企業賬號

2. 在企業賬號的小程序后臺中  必須  給  開發者添加上白名單

1. 一個AppID可以綁定多個開發者

2. 綁定之后的開發者就擁有了開發者的權限了

3. 支付按鈕

1. 先判斷緩存中有沒有token

2. 沒有  跳轉到授權頁面   獲取用戶的 token 值

3. 有  執行支付操作

流程：創建訂單，準備預支付，發起微信支付，查詢訂單

一，獲取token

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

page/autn/index頁面中：

<button open-type="getUserInfo" bindgetUserInfo="handleGetUserInfo">
    獲取授權</button>復制代碼

// 獲取用戶信息// 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 }        // 發送請求  獲取用戶的token
        const {token}=await request(url: '/user/wxlogin',data: loginParams,methods:         "post");        // 將獲取到的token存儲到緩存中，同時跳轉回上一個界面
        wx.getStroageSync("token", token);
        wx.navigateBack({            data: 1 // 返回上一層
        })    
    } catch(err) {        console.log(err);
    }
}復制代碼

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

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

二，準備預支付（獲取參數 pay）

三，發起微信支付（提交pay參數）

四，查詢訂單

五，刪除緩存中已經被選中購買的商品

六，刪除后的購物車數據 填充會緩存

七，跳轉頁面

圖片上傳（wx.uploadFile）

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

chooseImage：[],

this.setData({

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

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

})

上傳文件的api不支持多個文件同時上傳

解決方法：遍歷數組  挨個上傳

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

項目發布

注意：發布之前記得關閉詳情界面的  不校驗合法域名

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

上傳：

1. 版本號

1. 第一個數字（大版本的更新）

2. 第二個數字（重要功能更新）

3. 第三個數字（最小功能，小bug，小補?。?/p>

2. less文件是不會被打包上傳的

3. 上傳成功后的小程序還是一個體驗版本的小程序，如果需要將體驗版本的小程序變成線上版本的小程序，就在 微信公眾平臺將提交的體驗本的小程序，提交審核（審核的時間大概是一個小時）。

小程序插件

1. 小程序開發助手

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

   "less.compile": {    "outExit": ".wxss"}復制代碼

以上是“微信小程序的示例簡介”這篇文章的所有內容，感謝各位的閱讀！相信大家都有了一定的了解，希望分享的內容對大家有所幫助，如果還想學習更多知識，歡迎關注億速云行業資訊頻道！