详解mpvue开发微信小程序基础知识

2023-08-13 19:50:04 58

一、mpvue简介

mpvue是一个使用Vue.js开发小程序的前端框架。框架基于Vue.js核心，mpvue修改了Vue.js的runtime和compiler实现，使其可以运行在小程序环境中，从而为小程序开发引入了整套Vue.js开发体验。mp即miniprogram的缩写。

二、mpvue快速入门

①通过脚手架引入mpvue模板

vue3.0已经不支持vueinit命令了，所以需要单独安装@vue/cli-init，安装好之后，就可以按以下操作步骤引入mpvue模板了

npminstall-g@vue/cli-init

vueinitmpvue/mpvue-quickstartmy-project

cdmy-project

npminstall

npmrundev

npmrundev命令会在项目根目录下生成一个dist目录，其就是将vue的项目转换为微信小程序项目

②搭建小程序的开发环境

微信提供了一个专门微信开发者工具用于开发小程序，需要下载安装微信开发者工具，同时还需要申请一个小程序ID，即AppID，因为通过微信开发者工具创建小程序项目需要填入AppID，可以在微信公众平台申请得到。

③调试项目

通过微信开发者工具启动微信小程序项目，选择的项目目录是mpvue项目的根目录，而不是生成的dist目录，由于微信开发者工具不支持.vue文件的查看，所以我们还是要用自己的开发工具调试源码。

三、mpvue的一些使用细节

①mpvue的src目录下和vue一样，也有一个App.vue根组件，App.vue根组件只是一个结构，无具体内容，根组件有对应的main.js文件用于渲染App.vue根组件，即引入App.vue并作为Vue构造函数创建Vue实例，然后mount，还有一个app.json文件，即页面全局配置文件，用于页面的注册、tabBar的注册、全局window样式设置，如:

//App.vue

//main.js

importVuefrom'vue'
importAppfrom'./App'
Vue.config.productionTip=false
App.mpType='app'

constapp=newVue(App)
app.$mount()

//app.json

{
"pages":[
"pages/index/main"
],
"tabBar":{
......
},
"window":{
"backgroundColor":"#00BFFF",
"backgroundTextStyle":"light",
"navigationBarBackgroundColor":"#fff",
"navigationBarTitleText":"测试",
"navigationBarTextStyle":"black"
}
}

②mpvue中定义的页面都放在src目录下的pages目录里面，一个页面对应一个文件夹，每个页面文件夹内需要有一个.vue文件和main.js文件，main.js主要做的就是，引入当前页面对应的.vue，然后作为Vue构造函数的参数创建Vue实例并mount，并且main.js的名称不能改变，只能是main.

//main.js

importVuefrom'vue'
importAppfrom'./index'

//addthistohandleexception
Vue.config.errorHandler=function(err){
if(console&&console.error){
console.error(err)
}
}

constapp=newVue(App)
app.$mount()

在mpvue中，一个页面中的.vue文件的名字虽然可以任意，但是.js和.json文件名字是固定为main的，通常我们.vue文件也是固定使用index.vue，所有一个页面中通常固定包含index.vue、main.js、main.json，通过外层的文件夹来区分不同的页面，而原生小程序中，也是通过外层文件夹来区分不同的页面，但是文件夹中的四个页面的名称可以和外层文件夹相同，也可以不同，但四个文件必须统一。

③每次新增了页面，需要重新启动项目，即重新执行npmrundev.

四、微信小程序基础与常用API

①点击按钮提示用户是否授权并获取用户信息

微信小程序给我们的按钮

②wx全局对象

就像网页运行在浏览器环境一样，浏览器环境会提供一个全局的window对象，同样小程序是运行在小程序环境中，小程序环境也会提供一个全局的wx对象，wx会提供很多api，比如访问网络(wx.request({}))、页面跳转(wx.redirectTo({}))、显示loading(wx.showLoading({}))、显示提示(wx.showToast({}))等

③微信小程序中发起网络请求

在小程序环境中不能像浏览器环境一个直接提供ajax，而是提供了一个全局的网络请求api，即wx.request(),在小程序环境中只能使用wx.request()发起网络请求，不能使用axios等常用的请求类库，并且wx.request()并不存在跨域问题。使用wx.request()的时候，需要传递一个请求参数配置对象，request()方法返回结果并不是一个Promise对象，所以不能通过.then()的方式去处理请求结果，而是在请求配置对象中添加了success、fail、complete等回调函数，在回调函数中可以获取到请求的结果，如:

wx.request({
url:"http://www.baidu.com",//请求url地址必填
data:{
user:"evenli"
},
method:"get",//请求方法
header:{
"content-type":"application/json"//默认值
},
success(res){
console.log(res.data);//获取响应数据
},
fail(error){
console.log(error);//请求失败
}
complete(res){//接口调用结束，请求成功或失败都会执行
console.log(res);//如果请求成功则res为响应结果res，如果请求失败则res为错误信息error
}
});

需要注意的是，返回状态码为404也算请求成功，一般只有网络异常的时候才算请求失败。

④跳转页面非tabBar页面

如果想要跳转到某个非tabBar页面，那么可以使用一个全局的api，即wx.redirectTo({})，其作用就是关闭当前页面，跳转到应用内的某个页面。但是不允许跳转到tabbar页面。需要传递一个配置对象，主要属性为url，即要跳转页面的路径，可带参数，然后就是success、fail、complete三个回调函数，请处理跳转结果，如:

wx.redirectTo({
url:"../question/main",//在某个页面内../相当于pages/
success(){
},
fail(){
},
complete(){
}
});

⑤跳转到tabBar页面

在微信小程序中，tabBar页面是需要特殊的方式跳转的，即使用wx.switchTab({})的方式，其会跳转到tabBar页面，并关闭其他所有非tabBar页面，其用法同wx.redirectTo({});

wx.switchTab({
url:"../learn/main",//在某个页面内../相当于pages/
success(){
},
fail(){
},
complete(){
}
});

⑥页面配置文件

小程序的页面配置文件分为全局配置文件app.json与即页面配置main.json.全局配置文件可配置项比较多，整个配置文件内容要用花括号括起来，也就是说是一个JSON对象，如:

pages属性，是一个数组，用于定义小程序用到的页面，数组中每一项对应一个页面，即路径+文件名信息，不需要写后缀，在mpvue中所有页面固定使用main，即每个页面下都会有一个main.js，所以在配置pages时，通常为"pages/页面名/main"，位于pages数组第一项表示小程序的初始页面，即小程序运行时显示的页面。
window属性，即对小程序的窗口样式进行配置，其属性值为一个对象，主要包括backgroundColor(窗口背景颜色，即页面下拉后漏出的背景窗口颜色)、backgroundTextStyle(设置下拉背景字体、loading图的样式，目前只支持dark和light)、navigationBarBackgroundColor(导航栏背景颜色)、navigationBarTextStyle(导航栏标题颜色，目前只支持black和white)、navigationBarTitleText(导航栏标题文字内容)、navigationStyle(值为custom自定义导航栏)

微信小程序设置颜色的时候，只支持十六进制颜色，不支持RGB格式和颜色英文。

tarBar属性，用于配置窗口底部的tabBar，其属性值为一个对象，主要有color(设置tab未激活状态文字的颜色)、selectedColor(设置tab激活状态的文字颜色)、borderStyle(设置tabBar上边框的颜色，目前只支持black和white)、backgroundColor(设置tab的背景颜色)、list(用于配置tab项，最多可配置5项)，list属性值为一个数组，主要包括text(tab上显示的文字内容)、iconPath(tab处于未激活状态时显示的图标路径)、selectedPath(tab处于激活状态时显示的图标路径)、pagePath(tab被点击时要跳转的页面路径，其属性值为pages中配置的路径)
页面配置配置相对于全局主配置文件来说要简单得多，在页面配置文件中只能配置窗口的样式属性，即只能配置全局配置文件中的window属性中的内容，页面配置文件中配置的内容会覆盖掉全局配置文件中window中相同的配置，以决定当前页面的窗口表现，无需使用window属性，直接将window配置放到花括号中即可。

⑦小程序页面与Vue生命周期

小程序给页面提供了onLoad(页面加载)、onShow(页面显示，但还未渲染完成)、onReady(页面渲染完成)、onHide(页面隐藏)、onUnload(页面卸载)，mpvue将小程序提供的页面生命周期和vue的生命周期结合在了一起，也就是说使用mpvue开发小程序，可以同时使用小程序的生命周期和vue的生命周期，其顺序为:beforeCreate-->created-->onLoad-->onShow-->onReady-->beforeMount-->mounted。即Vue首先实例化然后页面开始加载、显示、渲染，页面渲染完成后Vue实例开始挂载。

⑧导航到某个页面

所谓导航到某个页面，就是跳转到某个页面，但是其会保留当前页面，跳转的目的页面导航栏左侧中自带一个返回按钮，点击可以回到之前的页面，但是这个跳转的目的页面不能是tabbar中的页面，其使用的是wx.navigateTo({})

wx.navigateTo({
url:"../myLesson/main"//导航到我的课程页面，目标页面自带返回按钮，点击可返回之前的页面
});

⑨动态设置页面导航栏标题

当我们点击列表中的某个具体项时，通常需要在其对应页面动态显示出当前点击项的具体导航栏标题，微信小程序提供了wx.setNavigationBarTitle({})用于动态设置导航栏栏标题，同样有success、fail、complete三个回调函数，如:

wx.setNavigationBarTitle({
title:"动态标题内容",
success(){
},
fail(){
},
complete(){
}
});

⑩本地缓存数据

微信小程序提供了setStorage({})方法，可以将数据存储在本地缓存中指定的key中，除非用户主动删除或因存储空间原因被系统清理，否则数据都一直可用。单个key允许存储的最大数据长度为1MB，所有数据存储上限为10MB。如:

wx.setStorage({
key:"key",
data:"value"
});

同样，微信小程序也提供了getStorage({})方法，用于获取对应key中存储的数据，其还有success、fail、complete三个回调函数，如:

wx.getStorage({
key:"key",
success(res){//成功获取到对应key中的数据
},
fail(){//未成功获取到对应key中的数据
},
complete(){//获取对应key数据结束，不管成功还是失败都会执行
}
});

getStorage()和setStorage()方法本身是异步的，但是微信小程序提供了对应的同步方法，即getStorageSync("key")和setStorageSync("key","value");

⑪轮播图组件

微信小程序提供了一个轮播图组件，其中只可放置swiper-http://www.haoziyuan.ccitem组件，swiper有一些常用的属性，如:

indicator-dots:是否显示面板指示点;
autoplay:是否自动切换;
interval:设置自动切换时间间隔;
duration:滑动动画时长;
circular:是否循环播放;
indicator-active-color:设置当前选中的指示点颜色;

当然，组件不仅仅能实现图片的轮播，还可以实现其他轮播，比如列表内容的轮播(导航和内容的联动)，我们不给其添加indicator-dots、autoplay、interval、duration、circular等属性，而是通过手进行滑动，swiper组件还有一个current属性，属性值为滑动块的索引值，用于显示对应的滑动http://www.haoziyuan.ccitem，从而实现导航和内容的联动，即点击导航，自动切换到对应内容。swiper组件也提供了change事件，当我们手动滑动滑动http://www.haoziyuan.ccitem的时候，就会触发change事件，可以在事件对象中拿到对应滑块的索引，从而更新导航位置，实现滑动内容，自动高亮导航位置。

⑫可滚动区域组件

微信提供了一个可滚动区域组件，用于设置该区域中的内容是可以滚动的，通常用于实现可滚动的导航标签栏，其常用属性为:

scroll-x:是否允许横向滚动;
scroll-y:是否允许纵向滚动;
scroll-into-view:属性值为对应滚动http://www.haoziyuan.ccitem的id，表示自动滚动到对应id元素位置;
scroll-with-animation:在设置滚动条位置时使用动画过渡;

要实现点击某个滚动http://www.haoziyuan.ccitem后，自动滚动到对应滚动http://www.haoziyuan.ccitem位置，那么需要给每个滚动http://www.haoziyuan.ccitem添加一个id，然后动态改变scroll-into-view的值为对应的滚动http://www.haoziyuan.ccitem的id即可。



{{http://www.haoziyuan.ccitem.name}}

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持毛票票。

详解mpvue开发微信小程序基础知识

热门推荐

随机推荐