小程序开发笔记-01

https://segmentfault.com/a/1190000012337873

1. 有较多的api是在1.4.0以后才有的，所以用户首次登录时，先判断版本号

/**cover-view最低兼容版本为1.4**/
    checkSDKVersion: () => {
        let has = false
        try {
            const res = wx.getSystemInfoSync();
            const SDKVersion = res.SDKVersion.split('.');
            has = Number(SDKVersion[0]) > 1 || Number(SDKVersion[1]) >= 4;
        } catch (e) {}
        return has
    }

if(!this.checkSDKVersion()){
            wx.showModal({
                title: '',
                content: "你的微信版本过低，为了更好的用户体验和功能的正常运行，请先升级微信！",
                confirmText: "知道了",
                showCancel: false
            });
        }

 

2. 对于原生组件，由于是调用微信本身的，所以层级性最高，通过普通的view绝对定位并z-index并不能在真机上有效果，采用cover-view, cover-image

但其对css的兼容性极其不好

 只支持基本的定位、布局、文本样式。不支持设置单边的border、background-image、shadow、overflow等

所以单边的话通过设置height为1rpx来解决，图片就只能采用cover-image，且必须设置图片的height，不然在ios上不显示，在安卓上被压缩显示，其height：auto并不起作用

 

3 map 的控件controls并不友好，其绝对定位的单位是px，并不能很好的做适配，所以目前我用cover-view，cover-image来代替

 

4 对于绑定事件的，其参数传递是通过在元素设置data-*来间接传递的，所以如果你绑定的是父的，但是你点到子的，那么其event.target.dataset没有你想要的值，所以通常访问event.currentTarget.dataset

5 ws:if 与hidden，两个都能控制元素是否显示，不过ws:if在安卓上看是慢慢删除元素的，所以hidden有更好的体验效果

6 background-image;其链接如果是本地链接，在真机上面没有图片，直接在.wxss后缀的文件加background-image:url(),是会报错的，在wxml里，没有报错，不过本质上一样，在真机上没有作用效果

7 1px问题

小程序的rpx单位，对于边框，还是会显得粗一点，而已在app.wxss里定义1px_b的类不起作用，改为wxss_1px_b就行，css中不能以数字开头

8 video组件

可以通过cover-view来自定义控件，并将属性controls="{{false}}"，注意这里的Boolean值要双花括号才起作用，然后通过API来控制视频播放，达到一种直播的效果。（wx.createVideoContext）

9 如何动态添加view，类似vue的v-html

小程序是没有指令给你直接加的，但是你可以通过wxParse这个富文本解析插件来动态添加，不过你是采用HTML语言写的模板，然后通过wxParse的语法来实现动态添加；

10 如何获取元素的scrollTop等，从而监听滚动

微信提供了wx.createSelectorQuery()等API供选择

11.小程序设置cookie （http://blog.csdn.net/DylanCat/article/details/78186427）

微信小程序发起的请求是通过腾讯的服务器再同意发送到我们的服务器的，而session一般是通过客户端cookie中的sessionid来识别客户端的，既然请求都是要通过腾讯的服务器发送到我们的服务器，那么我们的服务器也就无从识别请求的发起者了