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

一、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>

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

(0)

相关推荐

  • mpvue+vant app搭建微信小程序的方法步骤

    mpvue使用 # 全局安装 vue-cli $ npm install --global vue-cli # 创建一个基于 mpvue-quickstart 模板的新项目 $ vue init mpvue/mpvue-quickstart my-project # 安装依赖 $ cd my-project $ npm install # 启动构建 $ npm run dev vant使用 yarn add vant # 将node_modules下的vant-weapp下的dist目录复制到s

  • 使用Vue.js开发微信小程序开源框架mpvue解析

    前言 mpvue是一款使用Vue.js开发微信小程序的前端框架.使用此框架,开发者将得到完整的 Vue.js 开发体验,同时为H5和小程序提供了代码复用的能力.如果想将 H5 项目改造为小程序,或开发小程序后希望将其转换为H5,mpvue将是十分契合的一种解决方案. 目前,mpvue已经在美团点评多个实际业务项目中得到了验证,因此我们决定将其开源,希望更多技术同行一起开发,应用到更广泛的场景里去.github项目地址请参见mpvue .使用文档请参见 http://mpvue.com/. 为了帮

  • 微信小程序mpvue点击按钮获取button值的方法

    在小程序里面是没有dom元素的,这个我们只要会小程序的应该都知道,但是在平时开发中我们偶尔会遇到需要点击某个元素获取它的值的情况,在这里给大家列举了两种情况解决方法 方式一:数据绑定 这种情况的话,对应的场景是只有一个按钮或元素调用这个方法的情况下的 在你的.vue文件中的data数据里面添加变量 data() { return { msg:'苏喂苏喂苏喂' }; getData(){ console.log( this.msg ) } 按钮上 <button @click="getDat

  • 基于mpvue搭建微信小程序项目框架的教程详解

    简介: mpvue框架对于从没有接触过小程序又要尝试小程序开发的人员来说,无疑是目前最好的选择.mpvue从底层支持 Vue.js 语法和构建工具体系,同时再结合相关UI组件库,便可以高效的实现小程序开发 前言: 本文讲述如何搭建完整的小程序项目框架,因为是第一次使用,有不完善的地方请大佬指正. 搭建内容包括: 1.使用scss语法:依赖插件sass-loader .node-sass 2.像vue一样使用路由:依赖插件 mpvue-entry 和 mpvue-router-patch 3.使用

  • mpvue微信小程序多列选择器用法之省份城市选择的实现

    前言 微信小程序默认给我们提供了一个省市区的picker选择器,只需将mode设置为region即可 <picker mode="region" bindchange="bindRegionChange" value="{{region}}" custom-item="{{customItem}}" > 因为小程序默认提供的省市区选择器只能保存名称,不能保存id,而且我也不需要选择三级城市,所以这里打算通过mode

  • 微信小程序的mpvue框架快速上手指南

    一.什么是mpvue框架? mpvue 是一个使用 Vue.js 开发小程序的前端框架.框架基于 Vue.js 核心(所以建议熟练掌握vue再使用mpvue框架,否则还是建议去使用原生框架去写小程序),mpvue 修改了 Vue.js 的 runtime 和 compiler 实现,使其可以运行在小程序环境中,从而为小程序开发引入了整套 Vue.js 开发体验. 二.必要的开发基础 ① 熟练掌握vue.js(未曾使用过vue这个框架的话,建议vue的官方文档进行学习:https://cn.vue

  • 详解基于mpvue微信小程序下载远程图片到本地解决思路

    说明 最近有些空余时间开始着手优化我那个吉他自学小助手的微信小程序,其中有一个功能是下载吉他谱到本地,开始以为只是很简单的拿到图片url然后down下来就好了,其实不然...最终通过google解决了这个问题,现在记录一下,以便后续翻阅. 少废话先看东西 演示.gif 流程梳理 获取图片远程地址数组-->遍历拿到图片缓存(临时地址)(wx.getImageInfo)-->保存缓存图片到本地(wx.saveImageToPhotosAlbum) 完整代码 子组件代码逻辑 //子组件downloa

  • 基于vue开发微信小程序mpvue-docs跳转页面功能

    打开github,把项目克隆下来https://github.com/F-loat/mpvue-quickstart 跳转页面,废话不多说直接点... 打开pages.js 默认是有两个页面的, 现在新添加一个newpage的页面 这样加就行了! 然后是 用模版上的方法去跳转页面已测试OK, 虽然是很简单的问题,但是没找到在哪写的,所以给记录下来!希望对你有用 总结 以上所述是小编给大家介绍的基于vue开发微信小程序mpvue-docs跳转页面功能,希望对大家有所帮助,如果大家有任何疑问请给我留

  • 微信小程序第三方框架对比 之 wepy / mpvue / taro

    众所周知如今市面上端的形态多种多样,手机Web.ReactNative.微信小程序, 支付宝小程序, 快应用等,每一端都是巨大的流量入口,当业务要求同时在不同的端都要求有所表现的时候,针对不同的端去编写多套代码的成本显然非常高,这时候只编写一套代码就能够适配到多端的能力就显得极为需要. 但面对目前市面上成熟的小程序第三方框架如何针对自己的需求进行选择也是一个麻烦事,本文针对当前市面上的三大转译框架进行一个综合对比,希望能对大家的技术选择有所帮助,如有哪里不妥的地方希望指正; 小程序开发有哪些痛点

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

    一.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,安装好之后,就可以按以下操作步骤

  • 微信小程序 基础知识css样式media标签

    微信小程序 基础知识css样式media标签 前言: 微信小程序中我遇到了一个对我来说是新的东西,但是对于前端开发来说不算是新知识,html页面中的media标签,在此记录下来以备不时之需 在css中我们使用media标签来区分调用哪个css样式,比如使用media="print"来表示当执行打印文档时,使用print.css样式.这样使得文档更有得于打印,如将页面宽度增宽.或屏蔽掉一些不需要打印的内容. <link href="styles/main.css"

  • 详解如何在微信小程序开发中正确的使用vant ui组件

    微信小程序终于可以支持npm导入第三方库了(https://developers.weixin.qq....),但是这种导入模式和使用模式有别于我们使用的npm调用.今天我按照有赞新出的vant小程序ui库来讲解如何导入npm资源. 第一步: 在小程序工程的根目录下执行: npm i vant-weapp -S --production 第二步: 保证当前你的微信开发者工具是最新版本,然后点击执行"构建npm" 构建成功后会提示: 同时项目根目录中会多出一个目录"minipr

  • 详解如何在微信小程序中愉快地使用sass

    前言 在微信小程序中,css是用wxss来表示,但写法基本一致.需要注意的是wxss扩展了两个特性,分别是: 尺寸单位 样式导入 具体可参考wxss,此处不做过多赘述. 为了方便打包sass,我们使用gulp来处理我们的scss文件,将其转换为wxss. 目录结构 在开发中,我们一般会有一个src源代码目录,一个dist目录用来输出我们打包的代码.而本次讲解用到的目录结构如下: build目录用来配置我们的打包参数,目前里面只有一个config.js文件 dist目录为打包输出的目录,也是小程序

  • 详解如何使用微信小程序云函数发送短信验证码

    其实微信小程序前端和云端都是可以调用短信平台接口发送短信的,使用云端云函数的好处是无需配置域名,也没有个数限制. 本文使用的是榛子云短信平台(http://smsow.zhenzikj.com) ,SDK下载: http://smsow.zhenzikj.com/doc/sdk.html 1.安装 下载后的SDK在cloudfunctions文件夹下会包含3个云函数文件夹,如下: 由于目前IDE没有云函数导入功能,您需要手工创建同名的云函数,然后将云函数下的文件手工拷进去 注:下载的SDK是一个

  • 详解Linux 下开发微信小程序安装开发工具

    详解Linux 下开发微信小程序安装开发工具 1. git clone https://github.com/yuan1994/wechat_web_devtools 然后创建一个文件夹 mkdir /opt/tencent/ 移动文件 mv ./wechat_web_devtools /opt/tencent 修改用户组 chown -R root:root /opt/tencent/wechat_web_devtools 启动测试工具 /opt/tencent/wechat_web_devt

  • 使用Typescript开发微信小程序的步骤详解

    Typescript的优势咱不需要赘述太多,有兴趣可以参考(https://www.typescriptlang.org/).今天给大家分享一下如何在微信小程序(或者其他同类小程序)开发中使用Typescript. 这个分两种情况,最简单的做法就是在创建项目时,选择Typescript这个选项,如下图所示.但要注意,这个选项只有在选择"Use no cloud service"才有,而另外一种Mini Program Cloud Base则不支持.这个可能是开发工具还没有跟上吧,希望以

  • 如何使用uniapp开发微信小程序获取当前位置详解

    目录 前言 一.配置 1.进入mainfest.json文件配置permission块 2.进入微信公众平台添加合法域名 3.高德SDK文件下载 二.使用步骤 (直接封装组件) 1.在组件中引入amap-wx.130.js文件 2.在data中定义 3.在created中定义 4.在methods中定义 5.在你需要使用的vue页面调用改组件 总结 前言 使用uniapp开发微信小程序时,多多少少会遇到获取当前位置的详细信息(比如:xxx省xxx市),uniapp提供了一个名为uni.getLo

随机推荐