如何使用框架进行微信小程序开发(详细版！)

一、mpVue(Vue in Mini Program)

1.1 简介

1.美团工程师推出的基于Vue.js封装的用于开发小程序的框架
2.融合了原生小程序和Vue.js的特点
3.可完全组件化开发

1.2 特点

1.组件化开发
2.完成的Vue.js开发体验(前提是熟悉Vue)
3.可使用Vuex管理状态
4.Webpack构建项目
5.最终H5转换工具将项目编译成小程序识别的文件

1.3 初始化项目

1.npm install vue-cli -g 下载vue脚手架
2.vue init mpvue/mpvue-quickstart my-project 初始化项目
3.cd my-project 进入项目根目录
4.npm install 根据package.json安装项目依赖包
5.npm start || npm run dev 启动初始化项目
6.从gitHub下载demo文件，将里面的server复制到项目当中，修改里面config.js文件的密匙等三行代码（登录腾讯云获取）

二、开启项目

2.1 注册小程序

1.src/app.json 全局配置文件
2.src/App.vue 等同于原生小程序中的app.js, 可再次写小程序应用实例的声明周期函数||全局样式(style中编写)
3.main.js 应用入口文件, 声明组件类型，挂载组件

2.2 入口文件介绍

import Vue from 'vue'
import App from './App.vue'
// Vue.config.productionTip = false 默认为false，用于启动项目的时候提示信息，设置为false关闭提示
Vue.config.productionTip = true
// 这个值是为了与后面要讲的小程序页面组件所区分开来，因为小程序页面组件和这个App.vue组件的写法和引入方式是一致的，为了区分两者，需要设置mpType值
App.mpType = 'app'
// 生成Vue实例
const app = new Vue(App)
// 挂载组件
app.$mount()

2.3 编写页面 pages/index

2.3.1 编写页面 pages/index

index.vue 等同于原生中的wxml + wxss + js

main.js 当前组件页面的入口文件，用于生成当前组件实例，并挂载组件

main.json 当前页面的局部配置文件(注意：index.vue组件最终会被转化为main.wxml以及main.wxss文件, 所以当前的json文件需命名main)

src源文件如下图所示

自动打包后的dist文件

2.3.2 index.vue文件

<template><div class="indexContainer"><img v-show="isShow" :src="userInfo.avatarUrl" alt=""><button open-type="getUserInfo" @getuserinfo="handleGetUserInfo" class="btn" v-show="!isShow">获取用户信息</button><p>hello {{userInfo.nickName}}</p><button @tap="toDetail">开启小程序之旅</button></div>
</template><script>export default {data(){return {isShow: false,userInfo: {}}},beforeMount(){console.log('组件挂载之前')// this.getUserInfo()this.getUserInfo();},methods: {handleGetUserInfo(msg){console.log(this);console.log(msg);if(msg.mp.detail.rawData){this.getUserInfo();}},getUserInfo(){// 获取用户信息wx.getUserInfo({success: (data) => {this.isShow = true;this.userInfo = data.userInfo},fail: () => {}})},toDetail(){console.log('xxx');wx.switchTab({url: '/pages/list/main'})}}}
</script><style>page {background: gray;height:100%;}.indexContainer {display: flex;flex-direction: column;align-items: center;}.indexContainer img {width:200rpx;height:200rpx;border-radius: 100rpx;margin:100rpx 0;}.btn {width:300rpx;height:300rpx;border-radius: 150rpx;margin:100rpx 0;line-height: 300rpx;}.indexContainer p {font-size: 40rpx;font-weight: bold;margin:100rpx 0;}.indexContainer button {background: #009ee0;font-size: 32rpx;}
</style>

2.3.3 index/main.js

import Vue from 'vue'
import Index from './index.vue'
const index = new Vue(Index)
index.$mount()

2.3.4 index/main.json

{"navigationBarTitleText": "主页","navigationBarBackgroundColor": "#8ed145"
}

2.4 注意事项

1.在每个组件中都需要使用：组件实例.$mount() 去挂载当前组件,否则对应的页面不能生效
2.npm run dev 每次会重新打包dist文件，测试只能在小程序工具上
3.mpvue中绑定小程序原生事件不能使用bind + 事件名，需要使用@事件名且要定义在methods中否则不生效
4.新创建的页面需要重新执行: npm run dev才能将新的页面打包到dist文件中

2.5 实例声明周期 && 小程序声明周期

2.5.1 vue实例声明周期

beforeCreate 实例初始化之后，数据观测(data observer) 和 event/watcher 事件配置之前被调用。

created 实例已经创建完成之后被调用。在这一步，实例已完成以下的配置：数据观测(data observer)，属性和方法的运算， watch/event 事件回调。然而，挂载阶段还没开始，$el 属性目前不可见。

beforeMount 在挂载开始之前被调用：相关的 render 函数首次被调用。

mounted el 被新创建的 vm.$el 替换，并挂载到实例上去之后调用该钩子。

beforeUpdate 数据更新时调用，发生在虚拟 DOM 重新渲染和打补丁之前。你可以在这个钩子中进一步地更改状态，这不会触发附加的重渲染过程。

updated 由于数据更改导致的虚拟 DOM 重新渲染和打补丁，在这之后会调用该钩子。

beforeDestroy 实例销毁之前调用。在这一步，实例仍然完全可用。
8.destroyed Vue 实例销毁后调用。调用后，Vue 实例指示的所有东西都会解绑定，所有的事件监听器会被移除，所有的子实例也会被销毁。该钩子在服务器端渲染期间不被调用。

2.5.2 小程序应用App实例声明周期

onLaunch: 小程序应用初始化

onShow: 小程序启动获取后台进入前台

onHide: 小程序应用从前台进入后台

2.5.3 小程序页面Page实例生命周期

onLoad 监听页面加载

onShow: 页面显示

onReady: 监听页面初始化渲染完成

onHide: 监听页面隐藏，注意当前页面实例依然存活

onUnload: 监听页面卸载

onPullDownRefresh: 监听用户下载动作

onReachBottom: 监听用户上拉触底操作

onShareAppMessage: 用户点击右上角分享功能

onPageScroll: 页面滚动

onTabItemTap：当前是 tab 页时，点击 tab 时触发

2.5.4 注意事项

除了 Vue 本身的生命周期外，mpvue 还兼容了小程序生命周期，这部分生命周期钩子的来源于微信小程序的 Page，除特殊情况外，不建议使用小程序的生命周期钩子。

三、mpvue中使用vue-router && axios

3.1 vue-router

在mpvue中对vue-router的支持不好,问题较多

进行页面跳转的是可使用小程序提供的API
(1) wx.navigateTo() 保留当前页面，可回退
(2) wx.redirectTo() 不保留，不能回退
(3) wx.switchTab() 使用于tabBar页面

3.2 axios

小程序中不支持使用axios，会报错： XMLHttpRequest is not a constructor

原因: 小程序的环境和浏览器的环境不一样

解决方法: 使用其他库: flyio

3.3 fly使用教程

3.3.1 gitHub地址

https://github.com/wendux/fly

3.3.2 使用步骤

1下载: npm install flyio
2引入: import Fly from ‘flyio/dist/npm/wx’ 注意flyio支持很多环境下使用
3生成实例: let fly = new Fly
4配置: Vue.prototype. f l y = f l y 以及其使用 : 组件中 t h i s . fly = fly 以及其使用:组件中this. fly=fly以及其使用:组件中this.fly.get()

四、mpvue VS 小程序状态管理

4.1 原生小程序

在data中初始化状态数据

修改状态: this.setData({key: value})

页面公共状态：
a.App程序实例的data中定义
b.获取状态数据: let datas = getApp()
c.修改状态数据:
datas.data.xxx = value

或者利用storage本地存储

4.2 Mpvue

在组件中通过getApp无法拿到对应的数据

mpvue中支持vuex，所以可以使用vuex集中管理状态

vuex几个重要的概念:
a.store对象
b.dispatch() 分发状态
c.actions 携带参与修改状态的数据，并触发mutations
d.mutations用于修改状态，并将状态交给store对象
e.getter 用于动态计算状态

五、原生小程序 VS mpvue 对比总结

原生小程序运行更稳定些, 兼容性好，mpvue可能在某些方面存在兼容性问题（vue-router）

mpvue支持vue组件化开发，效率更高，功能更强大(双向数据绑定, vuex)

mpvue可基于webpack组件化, 工程化开发

原生不支持npm安装包，不支持css预处理

支持 computed 计算属性和 watcher 监听器；模板语法中只支持简单的 js表达式。可以直接写 div 、span 等标签 computed 的写法

之前会vue的工程师上手mpvue框架的成本较低

如何使用框架进行微信小程序开发(详细版！)相关推荐

微信小程序开发详细步骤解决方案
什么行业适合使用微信小程序? 01. 什么是微信小程序? 微信内嵌的小程序,不需要下载安装就能使用,具有开发成本低.使用方便等特点,它实现了应用"触手可及",用户通过扫描或搜索就能 ...
分享微信小程序开发详细步骤
1.梳理小程序开发功能需求自己可以用思维导图写出自己想要开发的小程序里面,需要设置哪些功能,这些功能帮助我解决什么问题.然后把想法用文字形式在思维导图中写出来. 如果不知道如果梳理,也可以找专业的产 ...
微信小程序开发详细步骤(企业小程序开发流程)
今天珍奶bb给大家简单唠唠微信小程序开发详细步骤(企业小程序开发流程)? 微信小程序制作流程是什么?微信小程序制作模板套用怎么操作?今天珍奶bb给大家简单唠唠微信小程序制作流程是什么? 在唠微信小程序 ...
基于mpvue框架搭建微信小程序开发环境
一.按照mpvue官网新建前台工程 http://mpvue.com/mpvue/quickstart.html(mpvue快速上手教程) 二.路由功能代码实现 mpvue对vue-router的支持 ...
【uniapp】微信小程序国际化详细版
目录一.步骤 1.main.js 引入并初始化 VueI18n 2.创建文件夹locale 二.应用 1.页面(固定数据) 2.动态数据 3.系统官网详解:https://uniapp.dclou ...
微信小程序开发（四）入门之打卡功能开发
相关文章微信小程序开发(一)微信开发者工具以及小程序框架介绍微信小程序开发(二)开发之日历打卡小程序发现页微信小程序开发(三)入门之创建打卡活动前言本篇文章将介绍打卡小程序打卡页面相关功能的 ...
微信小程序开发（三）入门之创建打卡活动
相关文章微信小程序开发(一)微信开发者工具以及小程序框架介绍微信小程序开发(二)开发之日历打卡小程序发现页微信小程序开发(四)入门之打卡功能开发前言上篇介绍了日历打卡小程序发现页视图相关开发 ...
微信小程序开发（一）基础概念汇总
大家好,我是千与千寻,最近开始涉及小程序开发了,学一学最后做出来一个项目,最开始进入微信小程序开发的时候,如果学过Vue框架接触微信小程序开发的速度会非常快.我准备顺便开设一个专题,进行讲解微信小程序 ...
微信小程序开发导航：精品教程+网友观点+demo源码（5月9日更新）
1:官方工具:https://mp.weixin.qq.com/debug/w ... tml?t=1476434678461 2:简易教程:https://mp.weixin.qq.com/debu ...

如何使用框架进行微信小程序开发(详细版！)

一、mpVue(Vue in Mini Program)

1.1 简介

1.2 特点

1.3 初始化项目

二、开启项目

2.1 注册小程序

2.2 入口文件介绍

2.3 编写页面 pages/index

2.3.1 编写页面 pages/index

2.3.2 index.vue文件

2.3.3 index/main.js

2.3.4 index/main.json

2.4 注意事项

2.5 实例声明周期 && 小程序声明周期

2.5.1 vue实例声明周期

2.5.2 小程序应用App实例声明周期

2.5.3 小程序页面Page实例生命周期

2.5.4 注意事项

三、mpvue中使用vue-router && axios

3.1 vue-router

3.2 axios

3.3 fly使用教程

3.3.1 gitHub地址

3.3.2 使用步骤

四、mpvue VS 小程序状态管理

4.1 原生小程序

4.2 Mpvue

五、原生小程序 VS mpvue 对比总结

如何使用框架进行微信小程序开发(详细版！)相关推荐

最新文章

热门文章

如何使用框架进行微信小程序开发(详细版！)

一、mpVue(Vue in Mini Program)

1.1 简介

1.2 特点

1.3 初始化项目

二、开启项目

2.1 注册小程序

2.2 入口文件介绍

2.3 编写页面 pages/index

2.3.1 编写页面 pages/index

2.3.2 index.vue文件

2.3.3 index/main.js

2.3.4 index/main.json

2.4 注意事项

2.5 实例声明周期 && 小程序声明周期

2.5.1 vue实例声明周期

2.5.2 小程序应用App实例声明周期

2.5.3 小程序页面Page实例生命周期

2.5.4 注意事项

三、mpvue中使用vue-router && axios

3.1 vue-router

3.2 axios

3.3 fly使用教程

3.3.1 gitHub地址

3.3.2 使用步骤

四、mpvue VS 小程序 状态管理

4.1 原生小程序

4.2 Mpvue

五、原生小程序 VS mpvue 对比总结

如何使用框架进行微信小程序开发(详细版！)相关推荐

最新文章

热门文章

四、mpvue VS 小程序状态管理