基于mpvue的微信小程序项目搭建

栏目: JavaScript · 发布时间: 5年前

内容简介:此时,可以看到新建了一个==dist==文件夹(新的模板可能是dist/wx),该目录就是生成的小程序相关代码。这时,只需要启动微信开发者工具,创建小程序项目,并调试即可。项目预览如下:

参照mpvue五分钟上手教程

# 全局安装 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),该目录就是生成的小程序相关代码。这时,只需要启动微信开发者工具,创建小程序项目,并调试即可。

项目预览如下:

基于mpvue的微信小程序项目搭建

2. mpvue-entry

github

集中式页面配置,自动生成各页面的入口文件,优化目录结构,支持新增页面热更新

此处有两种使用方式:

方式一: 直接使用基于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

github

在 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.$routerthis.$route 对象的方法和属性了,具体支持哪些方法和属性, mpvue-router-patch

4. 状态管理

vuex

vuex-persistedstate

# 安装 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 接口,助力开发者快速搭建小程序应用。

Vant Weapp

小程序npm支持

小程序自定义组件

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
复制代码
基于mpvue的微信小程序项目搭建

==注意:== 需要修改忽略文件,设置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 和浏览器。

fly

// 安装
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.cssiconfont.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 devnpm 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
├─......

复制代码

以上就是本文的全部内容,希望本文的内容对大家的学习或者工作能带来一定的帮助,也希望大家多多支持 码农网

查看所有标签

猜你喜欢:

本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们

Flask Web开发实战

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开发实战》 这本书的介绍吧!

随机密码生成器
随机密码生成器

多种字符组合密码

XML 在线格式化
XML 在线格式化

在线 XML 格式化压缩工具

RGB CMYK 转换工具
RGB CMYK 转换工具

RGB CMYK 互转工具