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

一、mpvue简介二、mpvue快速入门① 通过脚手架引入mpvue模板npm install -g @vue/cli-initvue init mpvue/mpvue-quickstart my-projectcd my-projectnpm installnpm run dev② 搭建小程序的开发环境

③ 调试项目三、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.jsimport Vue from 'vue'import App from './App'Vue.config.productionTip = falseApp.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.jsimport Vue from 'vue'import App from './index'// add this to handle exceptionVue.config.errorHandler = function (err) {if (console && console.error) {console.error(err)}}const app = new Vue(App)app.$mount()③ 每次新增了页面，需要重新启动项目，即重新执行npm run dev.四、微信小程序基础与常用API① 点击按钮提示用户是否授权并获取用户信息<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}});④ 跳转页面非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自定义导航栏)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中配置的路径)⑦ 小程序页面与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数据结束，不管成功还是失败都会执行}});$j 轮播图组件微信小程序提供了一个<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">$k 可滚动区域组件微信提供了一个<scroll-view>可滚动区域组件，用于设置该区域中的内容是可以滚动的，通常用于实现可滚动的导航标签栏，其常用属性为:scroll-x: 是否允许横向滚动;scroll-y: 是否允许纵向滚动;scroll-into-view: 属性值为对应滚动item的id，表示自动滚动到对应id元素位置;scroll-with-animation: 在设置滚动条位置时使用动画过渡;<scroll-view>推荐教程：《微信小程序》以上就是用mpvue开发微信小程序基础知识的详细内容，更多请关注小潘博客其它相关文章！