全部产品服务
  • 网站建设◆平台开发
    网站定制
    网站建设方案
    网站建设收费明细
    模仿建站
    模板建站
    多合一建站
  • 网络推广
    SEO优化推广
    万词霸屏推广
    百度竞价推广
    爱采购CPC推广
    四大搜竞价推广
  • 商城开发
    分销商城
    小程序商城
    入驻联营商城
    B2B订货商城
    商城开发
    订货宝
  • 应用市场
    销售系统
    智能名片
    企业名录系统
    crm系统
    微信公众号助手
    400号码
    企业邮箱
    教育系统
    门店会员系统
    互动游戏系统
    微信传单
    云设计系统
    进销存
182-690-14756
立足南宁.服务全国

测评:强烈推荐的微信小程序开发总结

 二维码 126
发表时间:2021-09-09 09:01作者:南宁网站建设来源:网络采集

遇到过的坑小程序页面栈最多十层

问题:假设小程序内有12个问题页面,答完上一个问题后wx.navigateTo到下一个问题页面,那么到第十题时,你会发现wx.navigateTo跳转不到下一个页面。这是因为使用wx.navigateTo跳转会把当前页面保存到页面栈中微信小程序开发,而小程序页面栈最多十层。

require的路径不支持绝对路径

问题:在嵌套比较深的目录层级里,引用utils/request.js,需要慢慢../到根目录

// in page.js
const util = require('../../../../utils/util.js');
复制代码

解决:在App绑定require,Page里获取app微信小程序开发,直接app.require引入

// in app.js
App({
  onLaunch() {
    
  },
  require(path) {
    return require(`${path}`)
  },
})
// in page.js
const app = getApp()
const util = app.require('./utils/util.js');
复制代码

一些兼容问题

解决:使用wx.downloadFile和wx.openDocument

wx.downloadFile({
  url: 'https://.../XXX.pdf', //要预览的 PDF 的地址
  success: function (res) {
    if (res.statusCode === 200) { //成功
      var Path = res.tempFilePath //返回的文件临时地址,用于后面打开本地预览所用
      wx.openDocument({
        fileType: 'pdf', // 文件类型
        filePath: Path, //要打开的文件路径
        success: function (res) {
          console.log('打开 PDF 成功');
        }
      })
    }
  },
  fail: function (err) {
    console.log(err); //失败
  }
})
复制代码

常用的库​miniprogram-api-promise 扩展小程序api支持promise安装

npm install --save miniprogram-api-promise
复制代码

使用(开源项目中使用)

在小程序入口(app.js)调用一次promisifyAll,只需要调用一次。示例:

import { promisifyAll, promisify } from 'miniprogram-api-promise';
const wxp = {}
// promisify all wx's api
promisifyAll(wx, wxp)
// 使用
wxp.login().then(res => {
  // do something
})
复制代码

​wx-promise-pro扩展小程序api支持promise安装

npm i wx-promise-pro -S
复制代码

使用

在小程序入口(app.js)调用一次promisifyAll,只需要调用一次。示例:

import { promisifyAll, promisify } from 'wx-promise-pro'
// promisify all wx‘s api
promisifyAll()
// 使用
wxp.login().then(res => {
  // do something
})
复制代码

微信小程序商城开发_微信小程序后端开发_微信小程序开发

​安装

npm i @vant/weapp -S --production
复制代码

预览

可能使用到的插件微信同声传译介绍

微信同声传译插件是微信自研的语音输入,文本翻译等功能的插件封装分销系统,用于提供给第三方小程序调用。​

体验

性能优化图片渲染优化

// 获取用户手机操作系统
let supportWebp = false
const res = wx.getSystemInfoSync()
if (res.platform.toLocaleLowerCase() !== 'ios') {
  supportWebp = true
} else {
  supportWebp = false
}
// in app.wxs 利用阿里云oss提供的服务转换图片格式
var wrapUrl = function (supportWebp, url) {
  var fConfig = ''
  if (supportWebp) {
    fConfig = '?x-oss-process=image/format,webp'
  }
  return url + fConfig
}
// in wxml
"{{ tools.wrapUrl(supportWebp, url) }}"  />
复制代码

减小代码包体积

使用小程序瘦身工具,通过剔除无用文件、压缩图片、复用代码等方式减少小程序代码包体积

分包加载

某些情况下,开发者需要将小程序划分成不同的子包,在构建时打包成不同的分包,用户在使用时按需进行加载。在构建小程序分包项目时,构建会输出一个或多个分包。每个使用分包小程序必定含有一个主包。所谓的主包,即放置默认启动页面/TabBar 页面,以及一些所有分包都需用到公共资源/JS 脚本;而分包则是根据开发者的配置进行划分。在小程序启动时,默认会下载主包并启动主包内页面,当用户进入分包内某个页面时,客户端会把对应分包下载下来,下载完成后再进行展示。目前小程序分包大小有以下限制:

对小程序进行分包,可以优化小程序首次启动的下载时间,以及在多团队共同开发时可以更好的解耦协作。​

参考文章:

作者其他文章:

微信小程序app.onLaunch与page.onLoad异步问题手把手,带你撸小程序商城

PS:本人开源商城项目,持续更新,欢迎大家关注。

文章分类: 网络采集
分享到:
在线客服
 
 
 
 
 工作时间
周一至周五 :8:30-17:30
周六至周日 :9:00-17:00
 联系方式
郑工:182-6901-4756