微信小程序の一些踩坑点

WXS的使用

1. 小程序如何使用在页面上使用类似于vue2的过滤器属性?
   A: WXS
2. 使用
   1. 新建一个wxs文件,里面只支持js的es5语法,在里面写转换函数,通过module.exports = {方法名} 导出
   2. 在需要使用工具类函数的页面引入wxs标签

      // module 就是类似于整个模块名称,通过这个名称获取里面的方法
      <wxs sr="../文件.wxs" module="format"></wxs>
      <view>{{ format.moment(time) }}</view>

指令

1. wx:for
   1. 重命名item和index
      Q:为什么要重命名?
      A:当双重wx:for循环时必须得把内部wx:for循环的item和index做修改
   2. 示例:

      <!-- 通过 wx:for-item/wx:for-index重命名 -->
        <block wx:for="{{ arr }}">
          <view> {{item}} </view>
          <view> {{index}} </view>
          <!-- 通过 wx:for-item/wx:for-index重命名 -->
          <view wx:for="{{ arr2 }}" wx:for-item="itm" wx:for-index="ind" >
              {{ itm }}-{{ ind }}
          </view>
        </block>

2. wx:if/wx:elif/wx:else
   1. 与hide区别

      就像v-if和v-show的区别,wx:if是对元素节点进行操作,hide是对样式操作

值的注意:

hide的默认值是true

wxss的背景图引用

不能使用本地资源引用,只能引用在线地址或者把图片转成base64

npm包依赖安装关于基础库的bug

有些Npm依赖只支持特定的小程序基础库版本或者压根不支持小程序,所以在安装依赖的时候需要查看一下是否支持小程序

npm包构建流程

1. 初始化项目包的npm

   npm init --y

2. npm安装对应依赖包
3. 详情 -> 勾选使用npm模块选项
4. 点击菜单栏 : 工具 -> 构建npm (每次下载新的依赖都得重新构建)
5. 通过require或者import方法引用模块

   const moment = require('moment')
   const value = moment(+new Date()).format('YYYY-MM-DD')

6. 构建后再project.config.json文件中进行配置

   { 
     "setting": { 
         "packNpmManually": true, 
         "packNpmRelationList": [
           { 
               "packageJsonPath": "./package.json", 
               "miniprogramNpmDistDir": "./" 
           } 
         ] 
     } 
   }

注意：

由于目前新版开发者工具创建的小程序目录文件结构问题，npm构建的文件目录为miniprogram_npm，并且开发工具会默认在当前目录下创建miniprogram_npm的文件名，所以新版本的miniprogramNpmDistDir配置为’./‘即可