详解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({}))等

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

内容版权声明:除非注明,否则皆为本站原创文章。

转载注明出处:http://www.heiqu.com/d1b6a4a392fcf19674f6f6e36e9f7366.html