1

2

1. ctrl + shift + F (搜索)

2. alt + shift + F (代码格式化---VSCode)复制代码

1

 e.detail.value复制代码

1

 this.data.属性名复制代码

1

2

3

 this.setData({

        num: this.data.num + operation

});复制代码

1

2

3

4

5

6

7

8

9

 <button>+</button>

 bandletap(e) {

    // console.log(e);

    const operation = e.currentTarget.dataset.operation;

    this.setData({

        num: this.data.num + operation

    });

  },复制代码

1

view,text,rich-text,button,image,icon,swiper,radio,checkbox等。复制代码

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

App({    // 1 应用 第一次启用的时候触发

    onLaunch() {        // 在应用第一次启动的时候 获取用户信息

    }    

    // 2 应用 被用户看到的时候触发

    onShow() {        // 常用于小程序界面之间的切换

        // 对应用的数据或者页面的效果进行重置

    }    // 3 应用 被隐藏的时候触发

    onHide() {        // 暂停或者清楚定时器

    }    // 4 应用 代码发生报错的时候  执行

    onError() {        // 在应用发生代码报错的时候，收集用户的错误信息，通过异步请求，将错误信息发送到后台去

    }    // 5 页面找不到的时候就会触发

    // 应用第一次启动的时候，如果找不到第一个入口页面，才会触发

    onPageNotFound() {        // 如果页面不存在了  通过js的方式来重新跳转页面  重新跳转到第二个首页

        // 不能跳转到tabbar页面  导航组件类似

        wx.navigateTo({            url: "/pages/demo02/index"

        })

    }

})复制代码

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

Page({    data: {

    },    onLoad: function(options) {        // onload发送异步请求来初始化页面数据

    },    onShow: function() {        // 页面显示加载

    },    onReady: function() {        // 页面初次渲染完成

    },    onHide: function() {        // 页面隐藏时加载  一个页面跳转到另外一个页面也会触发onHide事件

    },    onUnload: function() {        // 页面卸载  也可以通过超链接   关闭当前页面就会触发onUnload事件

        // <navigator>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

3

<view>{{ item.name }}</view><view>

    // 占位符  传递的参数会替换掉 

    <slot></slot></view>复制代码

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

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

        })

    }

}复制代码

1

2

3

4

<tabs>

    <block>1</block>

    <block>2</block>

    <block>3</block></tabs>复制代码

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

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

13

tbaBar: {    "color": "",    //未选中的字体的颜色

    "selectedColor": "",    //选中后的字体的颜色

    "backgroundColor": "",  // 背景色

    "position": "", //定位

    "borderStyle": "",   //边框样式 

    "list": [

        {            "pagePath": "",   // 页面的路径

            "text": "",   // 标题的名称

            "iconPath": "",   // 未选中的图标路径

            "selectedIconPath": ""   // 选中后的图标的路径

        }

    ]

}复制代码

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

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;

}复制代码

1

2

3

view {

    color: var(--themeColor);

}复制代码

1

2

3

4

"window": {    "backgroundTextStyle": "light",   // 字体颜色

    "navigatorBarBackgroundColor": "#2b4500",  // 背景色

    "navigatorBarText": "唯品会",  // 字体提示

    "navigatorBarTextStyle": "white",  // 字体样式    }复制代码

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

Page({    data: {        swiperList: []

    },    // 页面加载事件

    onLoad: function() {        /*

            1. 发送异步请求 获取使用的数据

        */

        wx.request({            url: '',  // 接口地址

            success: (result) => {                // 请求成功 给swiperList数组赋值

                this.setData({                    swiperList: result.data.message

                })

            }

        });        /*

            wx.request异步请求太多了就会产生   回调地狱   的问题

            解决方法:  es6中的promise

        */

    }

})复制代码

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

// 同时发送异步代码的次数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();

                }                

            }

        });

    });

}复制代码

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

34

35

//  引入封装文件 (注意: 一定要把路径补全)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

6

7

8

9

10

11

12

13

14

// 接口返回的数据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});

}复制代码

1

2

3

4

5

6

7

8

9

10

11

12

13

export const request=(params) => {    // 定义公共的url

    const baseUrl = "https://api.zbsb-/api/public"

    return new Promise((resolve, reject) => {

        wx.request({            // 解构传递的参数

            ...params,            url: baseUrl + params.url;

            success: (result) => {

                resolve(result);

            },            faile: (err) => {

                reject(err);

            }

        });

    });

}复制代码

1

2

3

4

// 传递参数<navigator></navigator>// 拿取参数

onLoad：function(options) {

    consol.log(options);  // 打印输出options的值

}复制代码

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

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>

    // 切换内容    <view>

        <slot></slot>

    </view></view>methods: {    // 点击事件

    handleItemTap(e) {        // 获取点击的索引

        const {index} = e.currentTarget.dataset;        // 触发父组件中的事件

        this.triggerEvent("tabsItemChange", {index});

    }

}复制代码

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

//bindtabsItemChange 监听自定义事件<tab>

    <block>1</block>

    <block>2</block>

    <block>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

  });

}复制代码

1

2

3

4

5

6

7

8

9

10

11

12

13

// 获取商品数据列表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

2

3

4

5

6

onPullDownRefresh() {    // 重置  数据  数组

    this.setData({        goodsList: []

    });    // 重置页码   设置为1

     this.QueryParams.pagenum=1;    // 重新发送请求

    this.getGoodsList();

}复制代码

1

2

3

4

wx.showModel({    title: '提示',    content: '您是否要删除？',    success :(res) => {

        ...

    }

})复制代码

1

cart.splice(index, 1);  // 删除索引为index的元素cart.filter(v => v.checked);  // 挑选出cart数组中checked为true的值复制代码

1

2

3

4

5

6

7

8

9

export const showModel=({content}) => {    return new Promise((resolve,reject) => {

        wx.showModel({            title: '提示',            content: content,            success :(res) > {

                resolve(res);

            },            fail :(err) => {

                reject(err);

            }

        })

    })

}复制代码

1

2

3

4

import {showModel} from '../../utils/asyncWx.js';async showTips() {    const res=await showModel({content: '您是否要删除？'})    if(res.confirm) {

       cart.splice(index, 1);        this.setData(cart);

    }

}复制代码

1

wx.getStorageSync("address");复制代码

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

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:"支付失败"});

   }

}复制代码

1

2

<button>

    获取授权</button>复制代码

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

// 获取用户信息// 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);

    }

}复制代码

1

2

3

4

5

6

7

8

9

10

export const requestPayment=(pay) => {    return new Promise((resolve,reject){

        wx.request({

           ...pay,           success: (result) => {

                resolve(result);

           },           fail: (err) => {

               reject(err);

           }

        })                   

    })

}复制代码

1

2

3

4

wx.uploadFile({    url: '', // 图片要上传到哪里

    filePath: '', // 被上传文件的路径

    name: '',  // 上传的文件的名称  后台通过定义的上传的名称来获取名称

    formData: {}, // 顺带的文本信息})复制代码