近期开发小程序的坑汇总|8月更文挑战

1,110 阅读5分钟

前言🍑

最近做了一个小程序,遇到了一些问题,通过网上查询,找到原因是什么,也发现了很多解决方案。

我从中选择了一些适合方案做了记录,希望能让第一次做小程序的同志,减少坑的数量。

个别也可能不准(没有实测过),有问题可以在评论区反应。

🚦注意:以上是基于作者发的这个时间做修改的,建议大家可以关注小程序开发文档更新,里面信息更详细 在这里插入图片描述

下面开始,欢迎关注和收藏,后续会有更新。

问题🍑

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.mpvue使用ui组件自定义底部导航,不用原生的

跳转通过判断chang事件,不需要传参,通过e.target.key判断

注意:记得app.json 要配置底部导航的页面路径

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.mpvue实现下拉刷新

解决方案

13.mpvue 如何关注公众号

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

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

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

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

在这里插入图片描述

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

解决方案

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

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

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

解决方案

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

解决方案

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

解决方案

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

解决方案

22.小程序引入md5

解决方案

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

  • 满足两个小程序关联在同一个公众号下
  • 注意小程序基础库的版本
  • 注意跳转另一个小程序的版本(有开发版,体验版,上线版),你要有另一个小程序的体验权限,否则不要选择前两个版本
  • 解决方案 在这里插入图片描述

在这里插入图片描述

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

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

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

解决方案

26.调取订阅号文章

解决方案

27.关于小程序wx.getUserProfile接口的调用

解决方案

心得🍑

小程序开发者要关注接口变化,以及这个接口的适用条件,包括微信版本的支持程度,以及公众号类型,小程序的类型的接口权限

小程序中的其他需求(不一一展开,有问题评论区回复)🍑

  • 引入微信客服
  • 引入微信分享
  • 添加订阅消息功能
  • 分享生成海报
  • 常见小程序接口需求
  • 小程序二维码生成链接
  • 图片识别二维码提示
  • 获取微信步数信息

关注作者雾灵🍑

前端页面性能优化的建议汇总结 好看的css提高网页样式 🐱‍🚀 简析https协议传输的几个特点💰

《百道JS小知识点》系列(1)快速学习⛹🏻‍♂️

《百道JS小知识点》系列(2)快速学习⛹🏻‍♂️

简单实现vue的几个流程