小程序学习笔记&踩坑之旅（不定时更新）

setData如果要对key使用模板字符串，则需要给key加一层[]中括号，不然会报错

const num = 4; this.setData({

})


* 分享的链接可以在path拼接一些用户数据，用于分享页面打开时进行分享者显示之类的。
```javascript
// index.js
// 转发钩子
onShareAppMessage(obj){
    console.log(obj);
    return { 
        title: '今晚打老虎',
        // 在此处拼接的query可以在对应页面的onLoad生命周期钩子中拿到
        path:'pages/logs/logs?id=12345'}
}

// logs.js
onLoad: function (query) {
    console.log(query);// {"id":"12345"}
  }

js文件的require暂时不支持绝对路径。
bind事件绑定不会阻止冒泡事件向上冒泡，catch事件绑定可以阻止冒泡事件向上冒泡。
静态的样式统一写到 class 中。style 接收动态的样式，在运行时会进行解析，请尽量避免将静态的样式写进 style 中，以免影响渲染速度。
<wxs src="../tool.wxs" module="tool">的module 属性是当前 <wxs> 标签的模块名。在单个 wxml 文件内，建议其值唯一。有重复模块名则按照先后顺序覆盖（后者覆盖前者）。不同文件之间的 wxs 模块名不会相互覆盖。它的src只能引用 .wxs 文件模块，且必须使用相对路径。

module属性值的命名必须符合下面两个规则：
1. 首字符必须是：字母（a-zA-Z），下划线（_）
2. 剩余字符可以是：字母（a-zA-Z），下划线（_），数字（0-9）
wxml提供的标签无法渲染js动态加载的内容与<wxs>，只能include静态页面。

<!--index.wxml-->
<view class="container">
  <!-- 结果只展示了hello world -->
  <include src="./../logs/logs.wxml"></include>
</view>

<!--logs.wxml-->
<wxs module="tools">
function getMax(arr){
  return arr.sort(function(a,b){return b-a;})[0]
}
module.exports.getMax = getMax;
</wxs>
<view class="container log-list">
  <view>{{tools.getMax(logs)}}</view>
  <text>hello world</text>
  <block wx:for="{{logs}}" wx:for-item="log" wx:key="*this">
    <text class="log-item">{{index + 1}}. {{log}}</text>
  </block>
</view>

wx.createIntersectionObserver()可用于监听节点是否进入某个区域。详情：https://developers.weixin.qq.com/miniprogram/dev/framework/view/intersection-observer.html
自定义组件通过setData修改接收到的properties的值不会同步到父组件中，想要修改父组件中的某个property可以通过triggerEvent去触发父组件绑定在自定义组件上的事件，类似于vue中子组件的$emit。
发起的网络请求，只要成功接收到服务器返回，无论 statusCode 是多少，都会进入 success 回调。请开发者根据业务逻辑对返回值进行判断。
必须使用 HTTPS 发起网络请求。请求时系统会对服务器域名使用的 HTTPS 证书进行校验，如果校验失败，则请求不能成功发起。由于系统限制，不同平台对于证书要求的严格程度不同。
可以使用 wx.authorize 在调用需授权 API 之前，提前向用户发起授权请求。注意：wx.authorize({scope: "scope.userInfo"})，无法弹出授权窗口，请使用 <button open-type="getUserInfo"></button>。即无法通过API获取用户信息授权
可以使用 wx.getSetting 获取用户当前的授权状态。
开发者在 session_key 失效时，可以通过重新执行登录流程获取有效的 session_key。使用接口 wx.checkSession可以校验 session_key 是否有效，从而避免反复执行登录流程。

wxml的插值表达式不能执行原生js的所有方法，得写到wxs去封装一层才能使用。比如toLowerCase()，直接调用是不会执行的。

<!--index.wxml-->
<wxs module="tools">
function parse(number){
return parseInt(number);
}
module.exports={
parse:parse
}
</wxs> 
<view class="container">
<button bindtap='changeCode'>点击</button>
<text>{{tools.parse(num)===1?'yes':'no'}}</text>
<text>{{parseInt(num)===1?'yes':'no'}}</text>
</view>

// 点击按钮前，两个text都是展示no
// 点击按钮后，调用wxs封装后的parseInt的text展示yes，调用原生jsapi的text依然展示no
// index.js
changeCode() {
this.setData({
  num:1.1
})
console.log(parseInt(this.data.num)===1?'yes':'no')  // log yes
}

input:focus伪类无法修改聚焦时的样式
input上覆盖的元素所绑定的操作在软键盘处于调起状态时会失灵

wx.getUserInfo()不能静默调用，必须得用button去触发用户授权。但是用户头像用户昵称等可以通过open-data标签直接调用。

<!-- 如果只是展示用户头像昵称，可以使用 <open-data /> 组件 -->
<open-data type="userAvatarUrl"></open-data>
<open-data type="userNickName"></open-data>
<!-- 需要使用 button 来授权登录 -->
<button wx:if="{{canIUse}}" open-type="getUserInfo" bindgetuserinfo="bindGetUserInfo">授权登录</button>

小程序无法判断运行环境是开发环境还是线上环境。所以如果开发环境接口与正式环境接口不同的话，只能通过手动修改代码才能实现接口切换。给个麻瓜的方法：根据变量控制接口，然后上线前修改变量就行了
```
// 用于控制接口调用开发环境还是正式环境 true：开发&测试环境 false:正式环境
const isTest = true;
const productHost = {
// some host
};
// 开发环境与测试环境用同一套接口
const testHost = {
// some host
};
```

module.exports = { host: isTest ? testHost : productHost }

liubinis86 / blog

小程序学习笔记&踩坑之旅 #2

小程序学习笔记&踩坑之旅（不定时更新）