微信小程序
一、介绍
现如今,微信小程序越来越火,它实现了应用无需下载,随时随地使用,不需要传统APP的下载安装过程。
微信小程序,简称小程序,英文名Mini Program。
由于小程序的开发具有一整套完整极致详细的开发文档,在这里就不一一介绍了。
二、小程序的框架
简单说一些小程序的框架吧。
mpvue:美团点评团队出品的小程序开发框架:mpvue,是基于Vue的框架的,相当于是给Vue增加了开发微信小程序的能力。
wepy:wepy是在代码开发风格上借鉴了Vue,本身和Vue没有什么关系。
2.1、mpvue
2.1.1、mpvue的介绍:
mp:mini program
Vue:就是vue了
Mpvue就是用vue的技术体系开发小程序的框架。
2.1.2、mpvue框架的优点:
· 完整的 Vue.js 开发体验(会vue就没问题)
· 方便的 Vuex 数据管理方案:方便构建复杂应用
· 快捷的 webpack 构建机制:自定义构建策略、开发阶段 hotReload
· 支持使用 npm 外部依赖
· 使用 Vue.js 命令行工具 vue-cli 快速初始化项目
· H5 代码转换编译成小程序目标代码的能力
2.1.3、环境搭建和第一个程序:
1、安装nodejs,vue-cli
2、创建mpvue的项目:
vue init mpvue/mpvue-quickstart 项目名称
3、进入项目目录,安装依赖:
npm i
4、Npm run dev后,进入开发模式,就会自动产生目录dist。Dist目录是编译产生的小程序的代码。写vue代码,小程序的代码就会自动产生。
Npm run dev
5、运行小程序。
需要打开微信开发者工具,来运行。
(1)在微信开发者工具里,导入项目:
(2)项目目录指向 mpvueprj
(3)填入appId
(4)点击“导入”按钮
(5)尝试修改vue组件,自动编译,小程序结果立即呈现
Vue组件(index/index.vue)增加“hello”文字
自动编译后,在微信开发者工具里小程序的结果立即呈现
2.2、wepy
2.2.1、WePY介绍
WePY 是 腾讯 参考了Vue 等框架对原生小程序进行再次封装的框架,更贴近于 MVVM 架构模式, 并支持ES6/7的一些新特性。
注意:WePY 2 是基于小程序原生组件实现组件化开发。因此 WePY 2 支持的最低版本小程序基础库为 1.6.3。
官网:https://wepyjs.github.io/wepy-docs/2.x/#/
WePY 版本
WePY 2 并不是基于 WePY 1 的升级版,而是完全重新开发的全新版本
2.2.2、WePY 安装和创建项目
WePY的安装或更新都通过npm进行。
-
全局安装 WePY CLI 工具
npm install @wepy/cli -g
-
使用 standard 模板初始化项目:
wepy init standard 项目名
-
切换目录
cd myproj
-
初始化
npm install
-
npm run dev 监听并且编译项目,微信开发者工具导入项目(项目根目录),就可以预览效果
npm run dev