Mpvue小程序搭建总结

使用mpvue-quickstart搭建小程序框架

mpvue-entry

集中式页面配置，避免编写大量main.js文件

• 修改webpack配置

// build文件下的webpack.base.conf.js
// 打包时循环合并每个文件夹的JSON文件，最终注入app.json中
// 先安装glob和lodash
const glob = require("glob")
const fs = require('fs')
const _ = require('lodash')

//begin 合并json配置文件
const output = {};
glob('src/**/*.json', (error, files) => {
    files.forEach((filename) => { 
        const contents = JSON.parse(fs.readFileSync(filename, 'utf8'));
        _.mergeWith(output, contents,function (objValue, srcValue) {
            if (_.isArray(objValue)) {
                return _.unionWith(objValue, srcValue, _.isEqual)
             }
        });
    });
    fs.writeFileSync(resolve('src')+'/app.json', JSON.stringify(output,null,2));
});

const entry = MpvueEntry.getEntry('./src/app.json')

mpvue-config-loader

在vue文件中编写页面配置

// 单页面配置
export default {
    config: {`在这里插入代码片`
        navigationBarTitleText: '页面标题',
        enablePullDownRefresh: true,
        usingComponents: {  // 页面自定义组件配置
            'van-search': 'vant-weapp/dist/search/index'
        }
    }
}

// App.vue 进行全局配置
globalConfig: {
   usingComponents: {
     'van-notify': 'vant-weapp/dist/notify/index'
   }
 }

vant-weapp

有赞UI组件库

<van-notify id="van-notify" />

// 单页面配置
import Notify from 'vant-weapp/dist/notify/notify'
config: {
    usingComponents: { 
        'van-search': 'vant-weapp/dist/search/index'
    }
}

// App.vue 全局配置
globalConfig: {
    usingComponents: {
        ' van-notify': 'vant-weapp/dist/notify/index'
    }
}

小程序分包

• 划分： 根据业务场景，功能模块进行分包
• 作用：1.用户使用时做到按需加载其它模块。2.减少小程序首先启动时的下载时间
• 限制：1.必须有一个主包 2.所有分包大小不能超过8M 3. 单个分包不能超过2M
• 写法：在对应的json文件中配置

{
  "pages" : [
    {
      "path": "pages/workshop/workshopOptions", // 页面路径
      "root": "pages/workshop", // 分包根目录
      "subPackage": true // 是否分包
    }
  ]
}

小程序配置

• 查看小程序id和小程序密钥：微信公众平台>开发>开发设置
• 配置小程序logo，名称，备注：微信公众平台>设置>基本设置
• 配置服务器域名，业务域名：
  • 微信公众平台>开发>开发设置
  • 配置业务域名：
    • 需先下载校验文件，放置在域名根目录下。
    • 需要确保域名+校验文件，https://test.com/AbC.txt能够访问。

合法域名与业务域名的区别？

request合法域名：可以向该域名发起请求
业务域名：小程序内可调用组件打开该域名内的网页