微信小程序的踩坑

微信小程序的踩坑

逆战不停学

1、对于微信小程序开发过程中请求接口不支持http协议的情况，如网络图片地址和接口为http的情况，想要其正常显示，可通过勾选微信开发者工具右上角的详情–>本地设置–>不校验合法域名，当然为了安全起见微信开发的接口还是用https的数字认证来做为好。具体如图1所示：

​ 图1

2、对于微信小程序引入第三方库，所遇到的效果无法出现的问题，这里具体说明一下引入的步骤，以vantweapp组件库为例，首先，新建一个测试页面，如图2所示：

​ 图2

接下来，悬着vantweapp的一个效果，这里我就随便选了一个下拉菜单，如图3所示：

​ 图3

vantweapp给我们已经写好了在微信小程序中的具体配置步骤，首先，在项目根目录，通过dos窗口运行以下任意一句命令，如图4和图5所示，当然前提肯定要安装node环境，node的具体安装百度可知：

​ 图4

​ 图5

勾选微信开发者工具右上角的详情–>本地设置–>使用npm模块，然后在左上角工具项–>点击构建npm，如图6和图7所示：

​ 图6

构建完成后悔生成如下图7所示目录，：

​ 图7

注意！

如果你使用 typescript 开发小程序，需要在 tsconfig.json 中增加如下配置，防止 npm 构建后 tsc 编译报错

{
  "baseUrl": ".",
  "paths": {
    "@vant/weapp/*": ["./node_modules/@vant/weapp/dist/*"]
  }
  ...
}

将全局的 app.json 中的 "style": "v2" 去除，小程序的[新版基础组强行加上了许多样式，难以去除，不关闭将造成部分组件样式混乱。

接下俩，在test.json中使用组件，如图8所示：

​ 图8

注意！

这里要注意路径，在miniprogram_npm目录中是没有dist文件夹的，所以正确的路径图9所示：

​ 图9

将演示代码直接copy到test相应文件下：

​ 图10

​ 图11

​ 图12

效果就出来了，如下图13所示：

​ 图13

是不是超级简单啊。