微信原生小程序开发‘常见’与不常见问题解决方案（一）

微信小程序订单管理

当小程序收到这个信息时，需要配置订单管理页面，否则超过要求时间未配置的，会限制小程序被搜索与交易功能

解决方案

点击登录微信公众平台，订单管理>订单信息录入>输入小程序订单页面路由地址

user-info/user-order/user-order?id=${商品订单号}

这里输入的path就是小程序对应的页面路径

自定义组件无法渲染canvas

这个是微信小程序自身问题，在自定义的组件中是无法渲染canvas的，不可以将canvas的功能封装成一个自定义组件来引入使用

解决方案

将canvas直接渲染到wxml文件当中

      <canvas class="canvas_box" type="2d" id="{{canvasInfo.canvasID}}" style="width:{{canvasInfo.canvasWidth}}px; height:{{canvasInfo.canvasHeight}}px;position: {{isSaveStatus?'absolute':'relative'}};top: {{canvasTopPx}}px;left: {{canvasLeftPx}}px;" catch:touchstart="canvasStart" catch:touchend="canvasEnd" catch:touchmove="canvasMove" />

iconfont 引入不生效

拷贝新的iconfong文件到小程序当中，发现新的标签没有渲染出来，这是因为开发者工具使用了缓存当中的css|scss文件，所以无法及时生效

解决方案

可以关闭开发者工具，重新启动后生效

或者是清除所有的缓存后重新编译，但是推荐使用上面的重启大法。

安卓设备在指定的小程序版本库下，png图片变为jpg图片

developers.weixin.qq.com/community/d...

在这个版本的时候，使用小程序的获取图片API拿到的图片，png图片会转为jpg图片，这个是微信小程序自身的问题，

解决方案

这个版本有这个问题，需要使用第三方的服务，将图片格式进行转换。推荐使用阿里云的OSS去解决该问题。

添加编译模式，连续的字符串拼接错误

在小程序调试的过程中，经常会添加编译模式，调试指定的页面，但是会出现页面跳转参数错误的情况

wx.navigateTo 使用该API跳转页面时，如果拼接的参数当中有字符串，然后字符串当中是用 , 的，会被开发者工具修改格式

wx.navigateTo({ url: `${path.path}?prodID=${prodID}&strID=${strID}&editID=${editID}&skuID=${skuID}&keys=${path.keys}&editStatus=0&editDataID=null&cutout=${cutout}&prod_code=${prod_code}&curNum=${curNum}`, });

修改后的格式 prodID=5693&strID=53044%2C53045%2C53046&editID=test&skuID=64068&keys=hotCard&editStatus=1&editDataID=6600096&prod_code=undefined&cutout=true&curNum=0

错误点

&strID=53044%2C53045%2C53046

这个时候，页面的onLoad中接收到的参数就是错误的

解决方案

手动修改启动参数，将 %2c 修改为 ,

修正后

prodID=5693&strID=53044,53045,53046&editID=test&skuID=64068&keys=hotCard&editStatus=1&editDataID=6600096&prod_code=undefined&cutout=true&curNum=0

&strID=53044,53045,53046

苹果（IOS）设备在小程序当中渲染image会导致闪退

IOS设备在自定义组件当中渲染image元素时，如果渲染的元素px超过一定值时，那么IOS设备会直接闪退

解决方案

限制image的宽高在3000px以内。在开发小程序的过程中，如果一张图片的高度特别高，不推荐使用image元素进行渲染，推荐使用rich-texty元素渲染。

developers.weixin.qq.com/miniprogram...

    <rich-text nodes="{{newHtml}}" class="introduce-content"></rich-text>

安卓设备canvas渲染报错

安卓设备在canvas上面渲染图片时，如果图片的宽高超过8000px左右，那么图片请求会失败

报错

gsimg.gs-art.cn/canvasEditT...

不报错

gsimg.gs-art.cn/canvasEditT...

解决方案

将图片进行压缩，等比例减少图片的宽高。比如原图是300*8000的图片，那么可以等比例压缩为100*2666的图片，然后再进行渲染

background 链接不能用中文加空格

在元素的style样式中，如果使用background引入一张图片填充为元素的背景，这个使用这个图片的URL链接中不能包含 中文+空格,

例如下面这个链接

https://gsimg.gs-art.cn/canvasEditTools/PlayCards/54-86/扑克牌_画板 1 副本 7.png

<view class="img_bg_render" style="background-image: url({{URL}});"> </view>

解决方案

图片命名时，将中文与空格移除，采用纯英文+数字的组合，推荐使用时间戳+6位随机英文的方式命名文件。

scroll-view 渲染的图片尺寸不能过大，不然苹果设备会闪退

在小程序当中使用scroll-view元素时，在其中渲染图片时，渲染的图片如果尺寸过大，那么苹果设备有一定的概率会闪退

<scroll-view class="colorful-background" style="width:80vw;height:{{templateRenderSize.height}}" scroll-x="true" wx:if="{{BorderArray.length>0}}"> 
    <view class="erz" style="width:{{templateRenderSize.width}};height:   {{templateRenderSize.height}}" wx:for="{{BorderArray}}" wx:key="index" catch:tap="onSwitch" data-index="{{index}}">
        <image webp="{{true}}" style="width: 100%; height: 100%; display: block; " lazy-load="{{true}}" src="{{item.thumb_url_edit}}" mode="" /> 
    </view> 
</scroll-view>

解决方案

将图片的宽高限制在合理范围，渲染使用rpx进行渲染，数值限制在1000以内

Ts文件引入Js文件报错

在开发的过程中，如果在ts文件中引入了js文件，这个时候开发者工具会报错，这个时候需要修改ts的配置文件

解决方案

找到项目的tsconfig.json文件，注释部分代码

// "allowJs": true,
// "allowSyntheticDefaultImports": true,

tsconfig.json文件常用配置

{
  "compilerOptions": {
    "strictNullChecks": true,
    "noImplicitAny": true,
    "module": "CommonJS",
    "target": "ES2020",
    // "allowJs": true,
    // "allowSyntheticDefaultImports": true,
    "esModuleInterop": true,
    "experimentalDecorators": true,
    "noImplicitThis": true,
    "noImplicitReturns": true,
    "alwaysStrict": true,
    "noFallthroughCasesInSwitch": true,
    "noUnusedLocals": true,
    "noUnusedParameters": true,
    "strict": true,
    "strictPropertyInitialization": true,
    "lib": ["ES2020"],
    "typeRoots": [
      "./typings",
      "./type",
    ],
    "outDir": "./",
    "baseUrl": ".",
    "types": [""],
    "paths": {},
  },
  "include": [
    "./**/*.ts",
    "./**/*.js"
  ],
  "exclude": [
    "node_modules"
  ]
}

返回上一页时，携带参数

在开发的过程中，如果需要返回上一页，但是又需要将当前页面的参数返回到上一页当中，这个使用需要直接修改上一页的data中的数据

解决方案

setData当中修改的对象，可以在上一页当中提前创建好，

// 返回上一页 并携带参数 
prevPage() {
let pages = getCurrentPages(); //获取当前页面js里面的pages里的所有信息。
let prevPage = pages[pages.length - 2]; //prevPage 是获取上一个页面的js里面的pages的所有信息。 -2 是上一个页面，-3是上上个页面以此类推。 
prevPage.setData({
// 将我们想要传递的参数在这里直接setData。上个页面就会执行这里的操作。 
testList: this.data.list
})
//上一个页面内执行setData操作，将我们想要的信息保存住。当我们返回去的时候，页面已经处理完毕。
//最后就是返回上一个页面。
wx.navigateBack({
delta: 1 
// 返回上一级页面。
})
//此时页面数据已经改变为我们传递过来的数据。如果想要返回之后处理这些数据，那么要在onShow函数里执行，因为我们执行的是返回，所以不会触发onLoad函数，所以我们要在onShow里执行我们想要使用的函数。 },

构建npm

构建npm时，如果出现报错，那么可以参考一下解决方案。

解决方案

blog.csdn.net/qq_43492356...

iconfont彩色字体

在使用iconfont的icon时，如果想要保持icon自身的彩色，那么需要进行如下步骤：

安装iconfont-tools （全局安装）

npm i -g iconfont-tools

在iconfont文件夹当中打开cmd窗口

输入 iconfont-tools

然后设置设置css文件的prefix： icons

引入

在app.wxs当中引入

@import "/public/css/icon.wxss";

icon.wxss

.iconfont { display: inline-block; width: 16px; height: 16px; background-repeat: no-repeat; background-position: center; background-size: 100%; } 

.icon-shangyizhang { background: url(data:image/svg+xml,%3C%3Fxml%20version%3D%221.0%22%20encoding%3D%22utf-8%22%3F%3E%3Csvg%20version%3D%221.1%22%20width%3D%27100%25%27%20height%3D%27100%25%27%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20id%3D%22icon-shangyizhang%22%20viewBox%3D%220%200%201024%201024%22%3E%3Cpath%20d%3D%22M512.682667%2054.613333C258.730667%2054.613333%2052.565333%20260.778667%2052.565333%20515.413333S258.730667%20976.213333%20513.365333%20976.213333s460.8-206.165333%20460.8-460.8C973.482667%20260.778667%20767.317333%2054.613333%20512.682667%2054.613333zM580.266667%20346.794667c0%207.509333-2.730667%2014.336-7.509334%2019.797333L415.061333%20500.394667c-2.730667%204.096-4.778667%209.557333-4.778666%2014.336%200.682667%204.096%202.048%208.874667%204.778666%2012.288l155.648%20141.312c10.24%208.874667%2010.922667%2023.893333%202.730667%2034.133333s-23.893333%2010.922667-34.133333%202.730667L383.658667%20563.2c-14.336-12.970667-22.528-32.085333-21.845334-51.2%200.682667-19.797333%209.557333-38.229333%2024.576-51.2l155.648-133.802667c9.557333-9.557333%2024.576-7.509333%2034.133334%202.730667%202.048%204.778667%203.413333%2010.922667%204.096%2017.066667z%22%20fill%3D%22%23FC6783%22%20%3E%3C%2Fpath%3E%3C%2Fsvg%3E); }

icon 彩色图标生成与配置 
iconfont-tools 
例子:
C:\Users\EDY\Downloads\download\font_3768731_k4smw2bkq6>iconfont-tools 
? 设置输出文件夹名称： test 
? 设置输出文件css文件名称： test 
? 设置css文件的prefix： icons 
? 设置字体的大小： 16px 
? 是否生产小程序原生组件： true 
将test文件夹中的 test.css 样式文件内容全部复制 到 icons.wxss文件中 
将根目录文件夹中的iconfont.css 样式文件的内容全部复制到 icon.wxss文件中 

剪切板设置

设置剪切板

wx.setClipboardData({ 
    data: 'data', 
    success (res) {
        wx.getClipboardData({
            success (res) {
                console.log(res.data) // data 
            }
        }) 
    } 
})

查看剪切板

wx.getClipboardData({ success (res){ console.log(res.data) } })

企业微信客服配置

wxml

<text bindtap="onkefu" class="text"> 在线客服 (09:30-22:30) <text class="iconfont icon icons-CURSOR"></text> </text> 

js

wx.openCustomerServiceChat({ 
extInfo: { url: 'https://work.weixin.qq.com/kfid/kfc5cf1daf0afc926e3' }, // 客服URL 
corpId: 'wwda23536b4xxxxxxxx',// 企业ID 
success(res) { console.log('对接成功'); } 
})

主包跳转分包

【有道云笔记】主包跳转分包 note.youdao.com/s/cxMZMEXM

自定义组件传值

【有道云笔记】组件参数传递 note.youdao.com/s/TMzUq8Uo

自定义组件使用iconfont

在自定义组件当中，如果需要使用iconfont，需要在自定义组件的配置项中声明使用

在小程序当中使用canvas

【有道云笔记】创建环境 note.youdao.com/s/YomCsWNF

小程序TS环境配置

【有道云笔记】ts环境配置 note.youdao.com/s/NwmpTRA8

引入Easy SASS

【有道云笔记】Easy SASS note.youdao.com/s/7jl3CsHS

分包超过2M

在小程序开发的过程中，如果上传代码时，提示分包太大，超过2M，这个时候就需要删减代码，但是像这种超过2M的，一般都是用uniapp编译过来的项目，就算你再怎么删代码，这个时候也作用不大

解决方案

将代码移植到微信小程序当中，改为原生开发，直接舍弃uniapp方案，然后需要发布到其他平台时，使用微信小程序的多端应用模式，根据我多年的开发经验，这是最好的方案。

完结

OK ， 以上就是本人在开发小程序过程中遇到的问题以及对应的解决方案，如果各位看到这里，非常感谢大家的观看，希望各位多多点赞收藏，后续我会继续出更多文章供大家学习，各位在开发过程中有遇到什么样的问题，也可以及时联系我。

如果大家还遇到其他的问题，有其他的解决方案，欢迎联系作者或者在下方留言，作者每天都会登录掘金，收到以后及时反馈，谢谢大家，祝大家在开发的路上顺顺利利，无灾无难。