李维亮_前端开发攻城狮 - 2019年5月
type: channel
link: https://www.liweiliang.com/2019/05/
description: 行胜于言，自强不息！纸上得来终觉浅，绝知此事要躬行！
items: 基于mpvue实现动态修改小程序标题
items: mpvue小程序分包
items: 小程序使用mpvue框架无缝接入Vant Weapp组件库

基于mpvue实现动态修改小程序标题
type: item
date: 2019-05-23T16:50:12+08:00
description: 在mpvue项目中一个组件中，首先我们要把main.json里面的navigationBarTitleText设置成空，或者写个加载中{ "navigationBarTitleText": "" } 通过查看官方api文档发现动态修改页面标题的方法是wx.setNavigationBarTitle(Object object) 详细请参考官方文档然后我们把它放到vue文件的mounted属性里就可以了 mounted() { wx.setNavigationBarTitle({ title: '当前页面' }) }

mpvue小程序分包
type: item
date: 2019-05-13T16:24:00+08:00
description: 基于mpvue小程序进行分包首先在 pages / 下，新建 packageA/index 目录，在目录下再新建两个文件，index.vue和 main.js ，目录结构如下图所示:注意事项：要把子包的目录建在src/pages/ 下，而不是pages平级。然后对app.json进行配置"subPackages":[ { "root": "pages/packageA/", "pages": [ "index/main" ] }, { "root": "pages/packageB/", "pages": [ "index/main" ] } ],

小程序使用mpvue框架无缝接入Vant Weapp组件库
type: item
date: 2019-05-13T14:10:00+08:00
description: 有美团开源出的mpvue以其vue的语法和良好的开发效率再搭配上用户体验良好的UI组件无疑是定制化微信小程序的开发方式，然而由于mpvue是对微信原生开发的再次封装，这也为我们引入UI组件添加了不少麻烦，话不多说，接下来为大家展示引入vant-weapp的方法。1、首先，我们需要有个mpvue的基础的项目文件骨架，即用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 2、其次,在微信开发者工具中新建项目,填入注册的appid和文件目录（敲黑板了这里要注意一点，文件目录是mpvue项目中下的dist目录），根目录中的dist目录实际上就是mpvue每次打包完成后（npm run build）的目录，所以里面的MINA文件结构就是微信小城小程序原生开发的文件结构；3、接下来,我们需要用到vant-weapp开源项目中vant UI组件，所以要将vant-weapp下载下来,下来后将其项目下的dist文件全部都copy到我们需要用到原项目中（就是我们开始初始化的项目），为了方便管理，可以在根目录下的static下新建一个vant用于存放UI组件文件；git clone https://github.com/youzan/vant-weapp.git 4、接下来就比较简单了，组件的具体用法可在官方文档中查看，我们只需要在我们需要使用组件的页面的配置json文件中引入我们需要的组件以下是我的首页json配置 "usingComponents": { "van-action-sheet": "static/vant/action-sheet/index", "van-area": "static/vant/area/index", "van-badge": "static/vant/badge/index", "van-badge-group": "static/vant/badge-group/index", "van-button": "static/vant/button/index", "van-card": "static/vant/card/index", "van-cell": "static/vant/cell/index", "van-cell-group": "static/vant/cell-group/index", "van-checkbox": "static/vant/checkbox/index", "van-checkbox-group": "static/vant/checkbox-group/index", "van-col": "static/vant/col/index", "van-dialog": "static/vant/dialog/index", "van-field": "static/vant/field/index", "van-goods-action": "static/vant/goods-action/index", "van-goods-action-icon": "static/vant/goods-action-icon/index", "van-goods-action-button": "static/vant/goods-action-button/index", "van-icon": "static/vant/icon/index", "van-loading": "static/vant/loading/index", "van-nav-bar": "static/vant/nav-bar/index", "van-notice-bar": "static/vant/notice-bar/index", "van-notify": "static/vant/notify/index", "van-panel": "static/vant/panel/index", "van-popup": "static/vant/popup/index", "van-progress": "static/vant/progress/index", "van-radio": "static/vant/radio/index", "van-radio-group": "static/vant/radio-group/index", "van-…