小程序示例及源码

1. \ 注意事项

a. 开始标签 \ 和结束标签 \ 中空格和换行都有实际效果,谨慎使用换行和空格

   <text>第一行 
   第二行
     第三行</text>

最终显示

  第一行
  第二行
    第三行

b. 单行显示,溢出文本省略号...

    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;

c. 限行显示,溢出文本省略(此处3行)

    display: -webkit-box; 
    word-break: break-all; 
    text-overflow: ellipsis; 
    overflow: hidden; 
    -webkit-box-orient: vertical; 
    -webkit-line-clamp: 3;

d. \ 内无法嵌入其它非 \ 组件,\ 内嵌入的 \ 无法响应点击等交互事件。可使用 \ 代替

2. 引用路径

./ 或者直接文件夹名开头的代表相对路径 ​ 如: ./source/icon.pngsource/icon.png

/ 开头的代表绝对路径,相对于主目录 ​ 如: /components/icon.wxml

有些地方是支持绝对路径,有的不支持

支持:

  • \ 的 src
  • 路由的路径
  • 自定义组件的引用路径

不支持:

  • js、wxss 文件导入其它同类型文件
  • \ 的 src

3. 路由重复跳转

避免用户快速多次点击重复跳转的问题,由用户主动跳转的都使用组件 navigator,官方已经做了重复跳转的处理,非用户主动操作的,如网络访问后自动跳转的情况可以使用 API wx.navigateTo()

云开发

  1. 服务端 collection.add 添加多个问题

    const add = () => {
        for (let i = 0; i < 3; ++i) {
            db.collection('cname').add({
                data: { index: i }
            }).then( res => {
                console.log('*** 添加成功 ***', res)
            }).catch( err => {
                console.error('*** 添加失败 ***', err)
            })
        }
    }
    

    上面代码添加不成功,无报错信息。将添加改为同步操作就能成功,逐个添加。调整如下:

    const add = async () => {
        for (let i = 0; i < 3; ++i) {
            await db.collection('cname').add({
                data: { index: i }
            }).then( res => {
                console.log('*** 添加成功 ***', res)
            }).catch( err => {
                console.error('*** 添加失败 ***', err)
            })
        }
    }
    

    小程序不存在以上情况。

  2. 注意每次存到数据库的数据类型保持一致,读取的比对的时候也是类型严格比对,经常发生在如下情况

    onLoad(options) {
        // 通过 url 拼接的参数,获取的时候都是 String 类型的,需转换成自己想要的类型
        const id = Number(options.id)
    }
    

    如果数据库全部存 String 会出现如下情况

    onTap(e) {
        // 通过 data- 自定义属性传递的值会保留原有数据类型
        const id = String(e.currentTarget.dataset)
    }
    

results matching ""

    No results matching ""