微信小程序mpvue框架

作者：小惠珠哦 | 2024-07-03 09:57:30

踩

mpvue框架

微信小程序mpvue框架

参考：微信开放文档

一、vue基础

vue 的官方文档： Vue.js

创建mpvue框架：vue init mpvue/mpvue-quickstart truth_hold

二、 ES6基础语法

ES6是 javaScript的一个版本

ES6文档参考：ECMAScript 6 简明教程 | 菜鸟教程

【1】定义变量和常量

let : 用来声明变量

const：用来声明常量

【2】拼接字符串

   let name="jack";

   let str1,str2;

   str1="你好，我是"+name+"，欢迎来到这里";

   str2=`你好，我是${name},欢迎来到这里`;

   console.log(str1);

   console.log(str2);

【3】箭头函数

function(a,b){
return a+b;
}


(a,b) =>{
return a+b;
}

【4】数组批量赋值

   let a,b;
      let arr=[1,2];
      // a=arr[0];
      // b=arr[1];
      let [a,b] = arr;
      console.log("a的值为：",a);
      console.log("b的值为：",b);

【5】模块化

模块化主要有两个命令构成，export和import。

1、export命令用于规定模块的对外接口，import命令用于引用其他模块提供的功能

2、一个模块就是一个独立文件。该文件内部的所有变量，外部无法获取，如果你希望外部能够读取模块内部的某个变量，就必须使用export关键字往外暴露该变量

第一步-----------------------------创建新文件，在文件中用export暴露所需要的方法变量或常量

第二部-----------------------------在另一个文件中用import引入新文件所暴露的常量等

第三步-----------------------------可以在文件中使用新文件里所引入的常量等

const host = "hello"

export default host //用export暴露出模块中的host常量

import host from "@/config"  //从config文件中引入host常量
export default {
  methods:{
    test(){       
          console.log(host);    //引用host常量
    },

【6】Promise异步执行

（一般用于请求后端数据）

◆一个Promise是一个等待被异步执行的对象。

当它执行成功,状态会变成resolved;

执行失败状态会变成rejected。

◆resolved状态说明是正常执行返回的信息.

rejected状态相当于抛出错误信息，会被try.. . catch.. .捕捉到

◆什么是异步执行?同步执行?

异步执行，就是执行某项任务时，可以在它完成之前就执行下一个任务

同步执行，就是执行某项任务时，必须等待它完成才能执行下一个任务

import host from "@/config"  //从config文件中引入host常量
export default {
  methods:{
    PromiseTest(num){
      var result = new Promise(function(resolve,reject){
        if(num > 2){
          resolve("我执行成功了");
          console.log(`num的值为${num}`)
        }else{
          reject("我执行失败了");
          console.log(`num的值为${num}`)
        } 
      })
      return result;
    },

【7】async、await 异步等待

◆async就是异步的意思,会作为一个关键字放到函数前面，用来表示函数是一个异步函数

◆await是等待的意思，后面常放- -个promise对象。 await关键字只可以放到async函数里面

  setTime(num){
      return new Promise(function(resolve,reject){
        setTimeout(function(){
          resolve(`第${num}个延时器`);
        },2000);
      });
    },
  async test(){                                 //异步函数
    let result = await this.setTime(1);         //等setTime（1）执行后再执行
    console.log(result);

三、个人中心页面搭建

搭建新页面流程：

(1)在src/ pages文件夹下面新建一个以页面名称命名的文件夹

(2)在新建的文件夹下面创建. vue文件和main. js文件并填充基础代码

(3)在src/app. json的pages列表中添加.上新页面的路径

(4)重启项目

四、添加底部导航

将图片文件添加到static文件中

编辑app.json文件，可以参考微信开发文档

tabBar -------------- 用来编辑底部导航条

{
    "pages": [
        "pages/me/main",
        "pages/index/main"
    ],
    "window": {
        "backgroundTextStyle": "light",
        "navigationBarBackgroundColor": "#0bfec1",
        "navigationBarTitleText": "轻易",
        "navigationBarTextStyle": "black"
    },
    "tabBar": {
        "selectedColor": "EA5149",
        "list": [{
                "text": "首页",
                "pagePath": "pages/index/main",
                "iconPath": "static/images/home_01.png",
                "selectedIconPath": "static/images/home.png"
            },
            {
                "text": "分类",
                "pagePath": "pages/me/main",
                "iconPath": "static/images/class_01.png",
                "selectedIconPath": "static/images/class.png"
            },
            {
                "text": "发布",
                "pagePath": "pages/index/main",
                "iconPath": "static/images/send_01.png",
                "selectedIconPath": "static/images/send.png"
            },
            {
                "text": "购物车",
                "pagePath": "pages/index/main",
                "iconPath": "static/images/shopping_01.png",
                "selectedIconPath": "static/images/shopping.png"
            },
            {
                "text": "我的",
                "pagePath": "pages/me/main",
                "iconPath": "static/images/people_01.png",
                "selectedIconPath": "static/images/people.png"
            }
        ]
    }
}

五、在本地搭建后端开发环境