mpvue 是一个使用 Vue.js 开发小程序的前端框架。框架基于 Vue.js 核心,mpvue 修改了 Vue.js 的 runtime 和 compiler 实现,使其可以运行在小程序环境中,从而为小程序开发引入了整套 Vue.js 开发体验。mp 即 mini ...
mpvue 是一个使用 Vue.js 开发小程序的前端框架。框架基于 Vue.js 核心,mpvue 修改了 Vue.js 的 runtime 和 compiler 实现,使其可以运行在小程序环境中,从而为小程序开发引入了整套 Vue.js 开发体验。mp 即 mini program 的缩写。mpvue快速入门① 通过脚手架引入mpvue模板 vue 3.0已经不支持vue init命令了,所以需要单独安装@vue/cli-init,安装好之后,就可以按以下操作步骤引入mpvue模板了 npm install -g @vue/cli-init vue init mpvue/mpvue-quickstart my-project cd my-project npm install npm run dev npm run dev命令会在项目根目录下生成一个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 <script> export default { } </script> <style> page { width: 100%; height: 100%; background-color: #f7f7f7; } </style> // main.js import Vue from 'vue' import App from './App' Vue.config.productionTip = false App.mpType = 'app' const app = new Vue(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 import Vue from 'vue' import App from './index' // add this to handle exception Vue.config.errorHandler = function (err) { if (console && console.error) { console.error(err) } } const app = new Vue(App) app.$mount() 在mpvue中,一个页面中的.vue文件的名字虽然可以任意,但是.js和.json文件名字是固定为main的,通常我们.vue文件也是固定使用index.vue,所有一个页面中通常固定包含index.vue、main.js、main.json,通过外层的文件夹来区分不同的页面,而原生小程序中,也是通过外层文件夹来区分不同的页面,但是文件夹中的四个页面的名称可以和外层文件夹相同,也可以不同,但四个文件必须统一。 ③ 每次新增了页面,需要重新启动项目,即重新执行npm run dev. 微信小程序基础与常用API① 点击按钮提示用户是否授权并获取用户信息 微信小程序给我们的按钮<button>提供了一些微信开发的能力,其通过给<button>标签添加一个open-type属性,表示要给按钮开放的能力类型,比如getUserInfo,即点击按钮获取用户信息的能力,我们需要在<button>上通过监听getuserinfo事件,mpvue在小程序的基础上进行了封装,需要通过e.mp.detail.userInfo才能获取到用户信息, <button open-type="getUserInfo" @getuserinfo="getUserInfo">点击开始</button> <script> export default { getUserInfo(e) { console.log(e.mp.detail.userInfo); // 获取用户信息 } } </script> ② wx全局对象 ③ 微信小程序中发起网络请求 wx.request({ url: "http://www.baidu.com", // 请求url地址必填 data: { user: "even li" }, 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页面 wx.redirectTo({ url: "../question/main", // 在某个页面内../相当于pages/ success() { }, fail() { }, complete() { } }); ⑤ 跳转到tabBar页面 wx.switchTab({ url: "../learn/main", // 在某个页面内../相当于pages/ success() { }, fail() { }, complete() { } }); ⑥ 页面配置文件
微信小程序设置颜色的时候,只支持十六进制颜色,不支持RGB格式和颜色英文。
页面配置配置相对于全局主配置文件来说要简单得多,在页面配置文件中只能配置窗口的样式属性,即只能配置全局配置文件中的window属性中的内容,页面配置文件中配置的内容会覆盖掉全局配置文件中window中相同的配置,以决定当前页面的窗口表现,无需使用window属性,直接将window配置放到花括号中即可。 ⑦ 小程序页面与Vue生命周期 小程序给页面提供了onLoad(页面加载)、onShow(页面显示,但还未渲染完成)、onReady(页面渲染完成)、onHide(页面隐藏)、onUnload(页面卸载),mpvue将小程序提供的页面生命周期和vue的生命周期结合在了一起,也就是说使用mpvue开发小程序,可以同时使用小程序的生命周期和vue的生命周期,其顺序为: beforeCreate --> created --> onLoad --> onShow --> onReady --> beforeMount --> mounted。即Vue首先实例化然后页面开始加载、显示、渲染,页面渲染完成后Vue实例开始挂载。 ⑧ 导航到某个页面 wx.navigateTo({ url: "../myLesson/main" // 导航到我的课程页面,目标页面自带返回按钮,点击可返回之前的页面 }); ⑨ 动态设置页面导航栏标题 wx.setNavigationBarTitle({ title: "动态标题内容", success() { }, fail() { }, complete() { } }); ⑩ 本地缓存数据 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 :indicator-dots="indicatorDots" :autoplay="autoPlay" :interval="interval" :duration="duration" :circular="circular" indicator-active-color="rgba(255,255,255, 0.6)"> <block v-for="(item, index) in imgUrls" :key="index"> <swiper-item> <img :src="item" class="slide-item"/> </swiper-item> </block> </swiper> 当然,<swiper>组件不仅仅能实现图片的轮播,还可以实现其他轮播,比如列表内容的轮播(导航和内容的联动),我们不给其添加indicator-dots、autoplay、interval、duration、circular等属性,而是通过手进行滑动,swiper组件还有一个current属性,属性值为滑动块的索引值,用于显示对应的滑动item,从而实现导航和内容的联动,即点击导航,自动切换到对应内容。swiper组件也提供了change事件,当我们手动滑动滑动item的时候,就会触发change事件,可以在事件对象中拿到对应滑块的索引,从而更新导航位置,实现滑动内容,自动高亮导航位置。 ? 可滚动区域组件
要实现点击某个滚动item后,自动滚动到对应滚动item位置,那么需要给每个滚动item添加一个id,然后动态改变scroll-into-view的值为对应的滚动item的id即可。 <scroll-view class="btns_wrap" scroll-x :scroll-into-view="toChildView" scroll-with-animation> <span :class="{active: currentIndex === index}" class="btn_scroll" v-for="(item, index) in allLessons" :key="index" :id="item.id" @click="switchItem(index)"> {{item.name}} </span> </scroll-view> 本文来自 小程序开发 栏目,欢迎学习! 以上就是mpvue如何开发微信小程序?基础知识介绍的详细内容,更多请关注模板之家(www.mb5.com.cn)其它相关文章! |