微信小程序开发笔记

最新推荐文章于 2025-02-25 13:36:38 发布

机智的导演

最新推荐文章于 2025-02-25 13:36:38 发布

阅读量610

点赞数 1

分类专栏：微信小程序文章标签：微信小程序 mpvue iview weapp

本文链接：https://blog.youkuaiyun.com/xiaxiangyun/article/details/88094005

版权

微信小程序专栏收录该内容

2 篇文章

订阅专栏

去年在项目的空档期，自己学习了一下微信小程序的开发。由于之前的项目一直使用的Vue框架，所以在开发小程序的时候决定使用mpVue框架，配合iView Weapp的UI库，成功撸出了一个属于自己的微信小程序。在此也将整个开发过程和其中所遇到的问题记录分享一下。

起步

参考：使用mpvue开发小程序教程

在开发之前，有幸看到了上面链接中的这位大神写的这个教程，让我的开发过程少走了很多弯路。这个教程中每一步都写得特别细致，推荐大家查看。如果是有经验的开发者可以直接看本文，我只选取了开发过程中的关键步骤在此记录。

开发环境
创建项目

vue init mpvue/mpvue-quickstart applet
安装依赖

npm install或yarn install
启动项目

npm start或yarn start
在微信开发者工具中打开

选择小程序项目，项目目录为刚刚新建的applet目录，AppID为微信公众平台注册小程序时生成的原始ID。

至此，如果能在微信开发者工具中看到项目的欢迎页面的话，说明起步工作已经全部完成了。

开发

目录结构

使用脚手架生成的项目目录结构同Vue项目基本保持一致：

applet
├── package.json 主配置文件
├── project.config.json 小程序项目配置文件
├── static 静态资源
├── src
│    ├── components 组件
│    ├── pages 页面
│    ├── utils 工具
│    ├── App.vue 入口
│    └── main.js 入口
├── dist
│   ├── wx 编译后的小程序代码
├── node_modules 项目依赖
├── config 开发环境相关配置项
└── build webpack相关配置文件

修改app.json

其中pages为项目的页面路径，由于我使用了v-if实现单页面应用，所以只要一个页面级的入口。
配置路由

由于vue-router在小程序中无法使用，所以我查阅了一下发现大致有两种实现路由的方法。
1. 使用v-if表达式代替vue-router实现单页应用
2. 使用mpvue-entry和mpvue-router-patch插件配置路由
最终我选择了第一种方式作为我这个项目的路由实现。
```
    <div class="page-box">
      <homepage v-if="current==='homepage'"/>
      <businesscard v-if="current==='businesscard'"/>
      <others v-if="current==='others'"/>
    </div>
```
使用iView Weapp

之前公司在开发PC端项目时，选用了iView的UI库。而iView也有一套专为小程序设计的UI库，于是我便毫不犹豫地选用了。只需要先从Github下载iView Weapp的代码，然后将dist目录拷贝到自己的项目中，最后在页面的json文件中以usingComponents的方式配置即可。详细使用方式可参考iView Weapp 使用文档。
引入ECharts

在开发过程中，我希望使用图表来展示我的数据，于是需要引入ECharts图。参考在mpvue使用ECharts小程序组件一文，需要对文件进行一些小小的修改。另外需要注意的是，微信小程序需要控制在2M以内，可以去ECharts官网定制下载自己需要的图表。

遇到的问题

修改navigationBarTitleText

在路由切换的时候，我希望相应能改变navigationBarTitleText的值，在网上搜索大部分的文章都说的是在页面的js文件中通过添加config的方式实现：
```
export default {
  config: {}
}
```
可是我试了之后发现并没有生效，最终发现需要在页面同级目录下新建一个json文件进行配置。

当然，也有文章中提到了可以使用wx.setNavigationBarTitle方法进行修改。
mpvue的生命周期

mpvue中除了延用了Vue本身的生命周期之外，还兼容了小程序的生命周期，详见官方文档。另外还发现了一篇讲解mpvue的生命周期的文章，也推荐给大家：理解mpvue的生命周期。
mpvue获取用户信息

参考：mpvue 小程序获取用户信息

在获取登录信息这块，我希望做的是弹出一个弹窗，让用户自己选择是否登录，而由于获取用户信息需要配置button按钮，于是我修改了一下iView的源码，并写了一个自己的登录组件。
rpx与px的换算

在小程序开发中，可使用rpx作为像素的单位，具体换算规则见官方文档。
外链跳转

在开发小程序的过程中，本来想加一个外链跳到我自己的网站，结果发现个人类型的小程序并不支持外链跳转，详见官方文档。
阻止事件冒泡

参考：微信小程序:冒泡事件及其阻止
背景图片无法读取

在设置页面背景图时，发现无法生效且控制台报错，查阅官方文档后发现background-image不支持读取本地资源，可以使用网络图片、base64，或者使用<image/>标签。
真机调试报错：ES6转ES5

在真机调试小程序的时候，发现编译过程报错，最终发现是由于项目中的ES6语法没有编译成ES5导致报错，只需勾选微信开发者工具设置中的ES6转ES5即可。