mpvue小程序开发遇到的坑和指南（26个常见坑）

前言

最近做了一个小程序，遇到了一些问题，通过网上查询，找到原因是什么，也发现了很多解决方案。我从中选择了一些适合方案做了记录，希望能让第一次做小程序的同志，减少坑的数量。下面开始，欢迎关注和收藏，后续会有更新。
🚦注意：以上是基于作者发的这个时间做修改的，建议大家可以关注小程序开发文档更新，里面信息更详细

问题

1.个人小程序不能调用手机号，企业级小程序可以调用手机号

<button open-type="getPhoneNumber" bindgetphonenumber="getPhoneNumber"></button>

//获取手机号，必须要有用户点击这个动作的触发，上面的按钮是一定要有的，不过我们可以修改按钮的样式
//可以让它隐藏，也可以修改大小

2.解决微信小程序直接使用 axios 会报错的问题

• 引入qs

import axios from 'axios'
import qs from 'qs'

//设置根路径，可以在后期需要发送请求时使用 简写url  
const baseUrl =  'http://***';//这里为服务器地址，或者叫接口地址
axios.defaults.baseURL = baseUrl;

//解决微信小程序直接使用 axios 会报错的问题
axios.defaults.adapter = function (config) {
  return new Promise((resolve, reject) => {
    let data = config.method === 'get' ? config.params : config.data
    // wx小程序 发起相应请求
    wx.request({
      url: baseUrl + config.url,
      method:config.method,
      data:data,
      success:(res)=>{ return resolve(res)},
      fail:(err)=>{return reject(err)}
    })
  })
}

//封装 axios 请求函数
function call(url,params={},method='GET'){
  return axios({
    method,
    url,
    params
  })
}
function call1(url,data={},method='POST'){
  return axios({
    method,
    url,
    data
  })
}
export default {
    call: call,
    call1：call1
}

参考链接

3.使用ui组件自定义底部导航设置ui带的,不用原生的,跳转通过判断chang事件,不需要传参,通过e.target.key判断

4.小程序使用原生轮播组件

搭建轮播图时使用微信原生组件swiper组件,点击轮播图跳转,@click事件绑定到图片元素上

5.小程序路由配置的问题

• mpvue 可以使用vue-router,但需要引入插件做配置,整合path资源,我建议使用小程序自带路由跳转
• 注意三种小程序三种跳转方式都与哦

6.使用vuex 获取用户状态,注意vue与vuex的版本问题

• vue3对应 vuex4 vue2.x 对应vuex3.x

7.mpvue 如何修改iview组件的默认样式

解决方案

8.[渲染层网络层错误] pages/card/card.wxss 中的本地资源图片无法通过 WXSS 获取-解决办法

解决方案

9.小程序实现数据缓存

• 小程序数据缓存 localstorage（存储时间长）
• vuex(退出程序后再进入，缓存消失)

10.小程序接入云开发

• 参考小程序文档即可，使用vue框架可以自行在网络搜索

11.vue实现下拉刷新

解决方案

12.实现跳转到其他小程序

• 两个小程序关联到一个公众号

13.mpvue 如何关注公众号

• 利用客服消息,通关键词回复或运营人员人工发送图片消息，向用户推送公众号的二维码。小程序没有模板功能（需要后端支持，使用推送消息功能）
• 使用组件关注（需要满足一定条件）
• 长按识别二维码

14.业务域名与服务器域名的区别是什么

• web-view 嵌套需要使用业务域名，业务域名需要在域名对应的服务器上安装校验文件
• 只是请求各种资源，可以设置服务器域名，比如图片地址

15. 微信小程序navigateTo:fail webviewcount limitexceed问题解决

16.小程序报错:Unexpected end of JSON input 问题

解决方案

17.订阅号文章列表显示问题（Towxml 3.0来了，让小程序完美支持Markdown）

• 如果你的小程序是企业级，你要获取的公众号文章和你的小程序是同一个主体（注册时公司是同一个），可以进行配置，就可以使用web-view显示公众号文章
• 如果你是个人号小程序，那需要使用下面的方案
  解决方案

18.微信小程序 https://api.weixin.qq.com 不在以下 request 合法域名列表中

解决方案

19.微信小程序之扫普通链接二维码打开小程序实现动态传递参数及踩坑总结

解决方案

20.关于小程序获取手机号第一次失败，第二次成功的解决方案

解决方案

21.微信小程序wx.request POST请求，请求参数需要form-data形式

解决方案

22.小程序引入md5

解决方案

23.小程序打开另一个小程序

• 满足两个小程序关联在同一个公众号下
• 注意小程序基础库的版本
• 注意跳转另一个小程序的版本（有开发版，体验版，上线版），你要有另一个小程序的体验权限，否则不要选择前两个版本
• 解决方案
  

24.开发版没问题 但是上线以后是空白小程序

• 可能是你的代码报错没有解决就上传了

25.mpvue微信小程序自定义导航栏NavBar组件封装

解决方案

26.调取订阅号文章

解决方案

27.微信登录

解决方案

小程序高频需求汇总

• 引入微信客服
• 引入微信分享
• 添加订阅消息功能
• 接入关注公众号
• 分享生成海报
• 常见小程序接口需求
• 小程序二维码生成链接