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


Posted in Javascript onSeptember 23, 2019

一、mpvue简介

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全局对象

就像网页运行在浏览器环境一样,浏览器环境会提供一个全局的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: "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页面

如果想要跳转到某个非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>轮播图组件,其中只可放置swiper-item组件,swiper有一些常用的属性,如:

  • indicator-dots: 是否显示面板指示点;
  • autoplay: 是否自动切换;
  • interval: 设置自动切换时间间隔;
  • duration: 滑动动画时长;
  • circular: 是否循环播放;
  • indicator-active-color: 设置当前选中的指示点颜色;
<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事件,可以在事件对象中拿到对应滑块的索引,从而更新导航位置,实现滑动内容,自动高亮导航位置。

⑫ 可滚动区域组件

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

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

要实现点击某个滚动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>

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
动态加载js文件 document.createElement
Oct 14 Javascript
jQuery实现加入购物车飞入动画效果
Mar 14 Javascript
JavaScript实现的字符串replaceAll函数代码分享
Apr 02 Javascript
javascript replace()第二个参数为函数时的参数用法
Dec 26 Javascript
js实现二级导航功能
Mar 03 Javascript
AngularJS全局警告框实现方法示例
May 18 Javascript
js实现控制文件拖拽并获取拖拽内容功能
Feb 17 Javascript
React从react-router路由上做登陆验证控制的方法
May 10 Javascript
解决vue脚手架项目打包后路由视图不显示的问题
Sep 20 Javascript
vue实现表格过滤功能
Sep 27 Javascript
Vue ​v-model相关知识总结
Jan 28 Vue.js
vue组件vue-esign实现电子签名
Apr 21 Vue.js
layui动态渲染生成左侧3级菜单的方法(根据后台返回数据)
Sep 23 #Javascript
layui树形菜单动态遍历的例子
Sep 23 #Javascript
Vue+elementui 实现复杂表头和动态增加列的二维表格功能
Sep 23 #Javascript
优雅的使用javascript递归画一棵结构树示例代码
Sep 22 #Javascript
Webpack按需加载打包chunk命名的方法
Sep 22 #Javascript
jquery.tagsinput.js实现记录checkbox勾选的顺序
Sep 21 #jQuery
vue2.0+SVG实现音乐播放圆形进度条组件
Sep 21 #Javascript
You might like
php浏览历史记录的方法
2015/03/10 PHP
SyntaxHighlighter代码加色使用方法
2008/09/07 Javascript
使用js操作css实现js改变背景图片示例
2014/03/10 Javascript
深入探讨JavaScript、JQuery屏蔽网页鼠标右键菜单及禁止选择复制
2014/06/10 Javascript
jquery幻灯片插件bxslider样式改进实例
2014/10/15 Javascript
js拆分字符串并将分割的数据放到数组中的方法
2015/05/06 Javascript
nodejs爬虫抓取数据乱码问题总结
2015/07/03 NodeJs
javascript实现鼠标放上后下边对应内容变换的效果
2015/08/06 Javascript
js eval函数使用,js对象和字符串互转实例
2017/03/06 Javascript
JS判断非空至少输入两个字符的简单实现方法
2017/06/23 Javascript
浅谈 Vue 项目优化的方法
2017/12/16 Javascript
Angular整合zTree的示例代码
2018/01/24 Javascript
使用vue-router在Vue页面之间传递数据的方法
2019/07/15 Javascript
[25:59]Newbee vs TNC 2018国际邀请赛小组赛BO2 第二场 8.16
2018/08/17 DOTA
[53:23]Secret vs Liquid 2018国际邀请赛淘汰赛BO3 第二场 8.25
2018/08/29 DOTA
py2exe 编译ico图标的代码
2013/03/08 Python
Python实现网站注册验证码生成类
2017/06/08 Python
浅谈numpy数组的几种排序方式
2017/12/15 Python
PyQt5 实现字体大小自适应分辨率的方法
2019/06/18 Python
如何解决tensorflow恢复模型的特定值时出错
2020/02/06 Python
tensorflow实现残差网络方式(mnist数据集)
2020/05/26 Python
HTML5 video标签(播放器)学习笔记(一):使用入门
2015/04/24 HTML / CSS
H5 meta小结(前端必看篇)
2016/08/24 HTML / CSS
英国奢侈品在线精品店:Hervia
2020/09/03 全球购物
高中同学聚会邀请函
2014/01/11 职场文书
工厂保安员岗位职责
2014/01/31 职场文书
质量负责人任命书
2014/06/06 职场文书
高三霸气励志标语
2014/06/24 职场文书
社会实践的活动方案
2014/08/22 职场文书
交通事故和解协议书
2015/01/27 职场文书
2015年学校安全管理工作总结
2015/05/11 职场文书
家属联谊会致辞
2015/07/31 职场文书
Python图片处理之图片裁剪教程
2021/05/27 Python
FP-growth算法发现频繁项集——构建FP树
2021/06/24 Python
Python+SeaTable实现计算两个日期间的工作日天数
2022/07/07 Python
修改Nginx配置返回指定content-type的方法
2022/09/23 Servers