基于mpvue的微信小程序项目搭建
栏目: JavaScript · 发布时间: 5年前
内容简介:此时,可以看到新建了一个==dist==文件夹(新的模板可能是dist/wx),该目录就是生成的小程序相关代码。这时,只需要启动微信开发者工具,创建小程序项目,并调试即可。项目预览如下:
# 全局安装 vue-cli $ npm install --global vue-cli # 创建一个基于 mpvue-quickstart 模板的新项目 $ vue init mpvue/mpvue-quickstart my-project # 安装依赖 $ cd my-project $ npm install # 启动构建 $ npm run dev 复制代码
此时,可以看到新建了一个==dist==文件夹(新的模板可能是dist/wx),该目录就是生成的小程序相关代码。这时,只需要启动微信开发者工具,创建小程序项目,并调试即可。
项目预览如下:
2. mpvue-entry
集中式页面配置,自动生成各页面的入口文件,优化目录结构,支持新增页面热更新
此处有两种使用方式:
方式一: 直接使用基于mpvue-entry的模板
vue init F-loat/mpvue-quickstart my-project 复制代码
方式二:手动安装mpvue-entry并修改相关的webpack打包代码
# 安装mpvue-entry npm i mpvue-entry -D 复制代码
const MpvueEntry = require('mpvue-entry') module.exports = { entry: MpvueEntry.getEntry({ pages: 'src/pages.js', dist: 'dist/wx/' // 注意!!!!此处的配置应与congig/index.js中的build.assetsRoot保持一致 }), ... plugins: [ new MpvueEntry(), ... ] } 复制代码
// 官方模板生成的项目请务必去除以下配置 module.exports = { plugins: [ new CopyWebpackPlugin([{ from: '**/*.json', to: '' }], { context: 'src/' }), ... ] } 复制代码
// pages.js module.exports = [ { path: 'pages/news/list', // 页面路径,同时是 vue 文件相对于 src 的路径,必填 config: { // 页面配置,即 page.json 的内容,可选 navigationBarTitleText: '文章列表', enablePullDownRefresh: true } } ] 复制代码
3. mpvue-router-patch
在 mpvue 中使用 vue-router 兼容的路由写法
# 安装 npm i mpvue-router-patch -S 复制代码
// main.js import Vue from 'vue' import MpvueRouterPatch from 'mpvue-router-patch' Vue.use(MpvueRouterPatch) 复制代码
// 新建`src/router`文件夹 src ├─router ├─routes.js // 页面配置,同时用于mpvue-entry的配置 ├─components.js // 页面对应的组件(component) ├─index.js // 整个vue-router的配置 ...... 复制代码
// webpack.base.conf.js // 修改mpvue-entry的配置 module.exports = { entry: MpvueEntry.getEntry({ pages: 'src/router/routes.js', // 与vue-router共用路由配置 dist: 'dist/wx/' }), ........ } 复制代码
至此,我们可以在项目中使用 this.$router
和 this.$route
对象的方法和属性了,具体支持哪些方法和属性, mpvue-router-patch
4. 状态管理
# 安装 vuex,使用mpvue模板创建项目时已选了vuex的,此处可省略 npm install vuex --save # 安装vuex-persistedstate,使vuex状态持久化 npm install vuex-persistedstate --save 复制代码
// 创建src/store文件夹 src ├─store ├─index.js // 组装模块并导出store的地方 ├─mudule.const.js // 业务常量定义在这里,这样就可以在template、script中同时使用了 ├─其他需要分割的模块文件 ...... 复制代码
// src/store/index.js import Vue from 'vue' import Vuex from 'vuex' import createPersistedState from 'vuex-persistedstate' // state数据持久化 import appConst from './module.const' Vue.use(Vuex) export default new Vuex.Store({ plugins: [ createPersistedState({ paths: [ // 需要被持久化的state 'token' ], storage: window.sessionStorage // 持久化存储方式 }) ], state: { token: '', counter: 0 }, getters: {}, mutations: {}, actions: {}, modules: { appConst } }) 复制代码
// src/store/module.const.js // vuex模块:常量管理 export default { state: { ORDER_STATUS_PAID: 'paid' } } 复制代码
// src/main.js import store from './store/index' const app = new Vue({ store, ...App }) 复制代码
5. Vant Weapp
Vant Weapp 是有赞移动端组件库 Vant 的小程序版本,两者基于相同的视觉规范,提供一致的 API 接口,助力开发者快速搭建小程序应用。
step 1 安装vant weapp组件
# 安装vant weapp cd your/path/to/dist npm init npm i vant-weapp -S --production 复制代码
==注意==:此处安装vant weapp尽量使用npm安装,不要用cnpm安装。因为cnpm安装会在node_modules目录中生成_vant-weapp@0.4.7@vant-weapp目录,这样去进行第二步的构建npm时,会在miniprogram_npm目录中生成对应的_vant-weapp@0.4.7@vant-weapp目录,组件声明需要写成这样:
"usingComponents": { "van-button": "/miniprogram_npm/_vant-weapp@0.4.7@vant-weapp/button/index" } 复制代码
无疑,这样后期如果需要组件升级的话会是个大麻烦。
step 2 微信开发者 工具 构建npm
点击开发者工具中的菜单栏:工具 --> 构建 npm
勾选“使用 npm 模块”选项:设置-项目设置
此时,会在node_modules父目录中生成 miniprogram_npm
目录,这就是我们引用第三方组件的路径
step 3. 使用vant weapp组件
// app.json或页面json文件中 "usingComponents": { "van-button": "/miniprogram_npm/vant-weapp/button/index" } 复制代码
// vue中直接使用 <div class="demo-container"> <div class="demo-title">按钮</div> <div class="demo-row"> <label><van-button type="default">默认按钮</van-button></label> <label><van-button type="primary">主要按钮</van-button></label> </div> <div class="demo-row"> <label><van-button type="warning">警告按钮</van-button></label> <label><van-button type="danger">危险按钮</van-button></label> </div> </div 复制代码
==注意:== 需要修改忽略文件,设置dist/wx/package.json文件为不忽略文件
#.gitignore dist/wx/* !dist/wx/package.json 复制代码
6. flyio
Fly.js 是一个基于 promise 的,轻量且强大的Javascript http 网络库。目前Fly.js支持的平台包括:Node.js 、微信小程序 、Weex 、React Native 、Quick App 和浏览器。
// 安装 npm install flyio -S 复制代码
// 创建接口相关的目录src/api,方便接口统一管理 // 因我们的程序需要访问不同的业务接口,这些业务接口基础地址、请求格式、返回格式各有区别 //故创建了不同的业务接口模块,如若接口单一、标准,这里的多个接口模块是不需要的 src ├─api ├─index.js // fly对象创建和统一配置 ├─branch.js // 不同的业务接口模块 ├─order.js ├─其他业务接口模块 ...... 复制代码
// src/api/index.js // 注意:小程序需要使用的是flyio/dist/npm/wx;h5需要使用的是flyio/dist/npm/fly import Fly from 'flyio/dist/npm/wx'; /** * 创建一个默认配置的请求实例 * 对不同的接口提供者发起请求时,在对应的业务接口文件中进行具体的配置即可 */ export default function () { return new Fly(); } 复制代码
// src/api/branch.js import createHttp from './index'; let api = createHttp(); api.config.baseURL = 'https://your/api/base/path/'; // 注意:小程序只支持https、wss协议 api.interceptors.response.use( (response) => { return response.data; }, (err) => { return Promise.resolve(err); } ) const getBranchList = function () { return api.get('/branch.json'); } export { getBranchList } 复制代码
// 业务代码XX.vue import {getBranchList} from '@/api/branch'; // ..... getBranchList().then(data => { this.branches = data || []; this.branchesLoading = false; }).catch(err => { console.error(err); this.branchesLoading = false; }) 复制代码
7. css
css预处理器
微信小程序支持大部分的css,但是对于css选择器支持有限,本项目中已引入vant weapp,css工作量大大减少,因此暂不使用css预处理器。以后有必要引入的时候再来补充吧。
字体图标
本项目使用了阿里巴巴矢量图标库(iconfont)中的 Ant Design 官方图标库 ,引入过程如下:
step 1.选好图标后下载到本地
step 2.将下载的代码中的 iconfont.css
和 iconfont.ttf
拷贝到项目中的src/style/icon下
step 3.修改iconfont.css文件,定义字体的部分src只保留ttf就好
/*iconfont.css*/ @font-face {font-family: "iconfont"; src: url('iconfont.ttf?t=1543540389274') format('truetype'); /* chrome, firefox, opera, Safari, Android, iOS 4.2+*/ } .iconfont { font-family:"iconfont" !important; font-size:25px; font-style:normal; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } .icon-minus-circle-fill:before { content: "\e844"; } .icon-plus-circle-fill:before { content: "\e845"; } 复制代码
step 4. 使用
<icon class="iconfont icon-minus-circle-fill" style="font-size: 40px;color: #ccc"></icon> 复制代码
==备注==:网上说的下载的字体文件需要转base64不知是为何,目前没转换,在开发者工具中没有问题,以后有问题的话再来补充。
8. 其他
wx模块化
将wx对象模块化,给以后的h5留坑
打包代码调整
主要有两点调整
- 调试代码和生产代码打包到不同的文件夹
原打包代码 npm run dev
和 npm run build
都将小程序的代码编译到了dist文件夹,不便于区分,调整后将调试代码编译到dist文件夹,生产环境代码打包到weapp文件夹
- npm包的支持
在 npm run build
时将 dist/miniprogram_npm
代码拷贝到weapp,用来支持小程序对第三方包的依赖。
9. 整体目录结构
经过以上工作后,整体目录结构如下:
mall ├─build // 构建程序 ├─congfig // 环境配置 ├─dist // 小程序代码(调试代码) ├─wx ├─...... ├─mpvue编译后的小程序代码 ├─...... ├─miniprogram_npm // 小程序依赖 ├─package.json ├─src ├─api // 接口 ├─components // 组件 ├─config // 配置参数 ├─params.js ├─pages // 页面 ├─router // 路由 ├─store // vuex ├─style // 全局样式 ├─icon ├─iconfont.css ├─iconfont.ttf ├─common.css ├─utils // 工具方法 ├─index.js ├─wx.js ├─app.json ├─App.vue ├─main.js ├─static // 静态资源 ├─weapp // 小程序代码(生产环境) ├─index.html ├─package.json ├─...... 复制代码
以上就是本文的全部内容,希望本文的内容对大家的学习或者工作能带来一定的帮助,也希望大家多多支持 码农网
猜你喜欢:- 程序员如何搭建自己的个人博客
- 「小程序JAVA实战」springboot的后台搭建(30)
- CPM - 轻量的NPM私有源程序搭建
- 三周学会小程序(三):服务端搭建和免费部署
- IDEA基于支付宝小程序搭建springboot项目
- 从0到1使用Kubernetes系列(四):搭建第一个应用程序
本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们。
Flask Web开发实战
李辉 / 机械工业出版社 / 2018-8-1 / 129
这是一本面向Python程序员的,全面介绍Python Web框架Flask的书。关于本书的详细介绍、相关资源等更多信息可以访问本书的官方主页http://helloflask.com/book了解。 • 国内首本Flask著作,在内容上涵盖完整的Flask Web开发学习路径,在实践上包含完整的Flask Web程序开发流程。同时兼容Python2 .7和Python3.6。 • 内......一起来看看 《Flask Web开发实战》 这本书的介绍吧!