百度小程序经验积累[TOC] 小程序分享跳转传参，链接必须encode encodeURIComponent('deli

[TOC]

小程序分享跳转传参，链接必须encode

encodeURIComponent('delivery?source=order&orderId=4453494335&orderCategory=0')

baiduboxapp://swan/<appId>/pages/mall-web/mall-web/?surl=delivery&source=order&orderId=4453494335&orderCategory=0

这个链接里，实际参数是这些，delivery?source=order&orderId=4453494335&orderCategory=0

在跳转时不能像上面一样直接传，需要encodeURIComponent,才行

baiduboxapp://swan/<appid>/pages/mall-web/mall-web/?surl=delivery%3Fsource%3Dorder%26id%3D4453494335%26orderCategory%3D0

怎样测试分享链接打开小程序呢

添加编译模式，为分享链接要打开的页面参数为链接后面的所有参数

重启大法

如果遇到以下问题，不要怀疑自己，请重启

样式不生效
页面不能正常渲染
项目编译失败
写的新组件，引用后不生效

编译报错

开发者工具报一堆不是代码的错误，检查调试基础库的版本查看项目信息-> 调试基础库-> 3.40.28

组件编写

新创建的文件夹在引用时不生效解决方案：重启开发者工具
引用组件名称不能是驼峰写法(arrivalDialog)，必须用arrival-dialog
组件引用后，在页面出现两个相同的DOM 原因: 组件中有语法错误

json文件

{
    "component": true,
    "usingComponents": {
        "popup": "/pages/components/popup/popup",
        "btn-group":"../btngroup/index"
    }
}

子组件接收参数要在properties中定义

properties: {
    dataSource: {
        type: Object,
        value: null,
        observer: function(newVal, oldVal) {
            this.renderView();
        }
    }
}

如果子组件里要根据父组件里传来的数据进行业务逻辑处理，需要在observer里重新setData

组件的方法要写到methods: {}里

事件绑定

在子组件调用父组件的方法，要逐级传递，不能漏掉其中一层

子组件调用父组件的方法

    closeModal(e) {
        this.triggerEvent('toggleReservationDialog', {isShow: false});
    }

引用子组件

<order-dialog
    bind:toggleReservationDialog = "toggleReservationDialog"
/>

事件传参

this.triggerEvent('arrivalSubmit', {telephone: input});

在父组件arrivalSubmit中，获取参数不能直接取到telephone这个对象小程序会再包一层，用以下方式获取

const telephone = e.detail.telephone;

小程序自身缺陷

s-if中的表达式

<!-- 无法识别，会报错 -->
<!-- <swan s-if="{{+res.code === 1}}"> -->
<swan s-if="{{res.code === 1}}">

</swan>

表达式过于复杂，会导致DOM无法渲染
for循环无法一次循环两条数据，不能修改当前index. 解决办法: 先处理好数据结构再循环
css语法不能识别color: var(--color-white);(之前可以识别~~~)

React代码迁移到小程序经验

html结构直接拷贝到swan文件

div替换为view
p, h1-h6 等替换为view, 原来的标签样式替换为view后加class。如: <view class="h1"></view
className替换为class
onClick替换为bindtap
onclick传参需要在js方法里传递，参数具体值可以用data-绑定到dom上，在js中通过e.currentTarget.dataset.获取, 如果当前组件只有一个data，不是数组类型的数据, 可以直接从this.data中获取
less通过转换工具转成css，px替换为rpx，数值都需要*2。如：width:20px---> width: 40rpx;
js setState替换为setData
jsx中根据条件渲染的DOM可以根据具体情况看拆分成新组件还是通过s-if, s-else解决
想查看某个js变量的值，可以绑定到DOM上查看，如
```
    <swan item="{{item}}"></swan>
```

强制触发小程序页面渲染的方法

在组件properties里定义变量名, 以及监听事件

properties: {
    data: {
        type: Object,
        value: {},
        observer(newVal, oldVal) {
            this.processData();
        }
    }
}

设置变量为null,再设值

this.setData({
    dataList: null
}, () => {
    this.setData({
        dataList: [1, 2, 3]
    });
});

强制销毁DOM, s-if设为false，再设为true 在设置style=background-color: rgba(255, 255, 255, ${opacity});时, data已经发生变化，但页面没改变

样式问题

在view里包一个image元素，如下

<view class="con">
    <image
        src="https://cms-dumall.cdn.bcebos.com/cms_upload_pro/cms_1569467395902.jpg"
        mode="widthFix"
        class="image"
    />
</view>

css


.con {
    background-color:crimson;
}
.image {
    width: 100%;
    margin-top: 12rpx;
}

这时候image会有多余的背景色出现, 原因是image元素为inline-block元素，通过设置display: block;解决

动画实现

一些复杂的动画不能通过样式来实现，只能通过提供的Animation API来实现，非常麻烦~~~

scroll-view高度必须固定

通过css设置height: 100vh;

解释：使用竖向滚动时，需要给定一个固定高度，可以通过css来设置height。

终于支持async了啊，真不容易2019-12-26 20:06:33

音频播放

不要用audio组件，直接用API里的innerAudioContext开发。拖动条用slider组件

跳到指定位置播放用InnerAudioContext.seek

音频播放器播放时控制slider问题

播放会自动设置slider的值，但是拖动时也会设置值，会有闪烁的效果

解决方法：

拖动时，暂停播放，结束后开始播放

百度小程序经验积累