小程序笔记(view:3018)

1.后台登陆
https://mp.weixin.qq.com/

2.开发文档
https://developers.weixin.qq.com/miniprogram/dev/

3.说明文档
https://developers.weixin.qq.com/miniprogram/analysis/

4.wafer2常见问题
https://github.com/tencentyun/wafer2-startup/wiki/常见问题

5.QA
https://developers.weixin.qq.com/miniprogram/dev/qa.html

6.用户身份识别
https://developers.weixin.qq.com/miniprogram/dev/api/api-login.html

7.小程序开发指南
https://developers.weixin.qq.com/ebook?action=get_post_info&docid=0008aeea9a8978ab0086a685851c0a

8.微信支付
https://pay.weixin.qq.com

9.微信开放平台
https://open.weixin.qq.com

10.微信公众平台
https://mp.weixin.qq.com

11.微信开发
https://github.com/Tencent/WeDemo

黑话
盒子：专门收集导航小程序，小游戏的导航类小程序

1).button去掉边框

button::after {display:none}

2).角标

wx.setTabBarBadge({
  index: 0,
  text: '1'
})
wx.setTabBarBadge({
  index: 0
})

3).动态class

<view class="page-heaer {{isActive ? 'active':'' }}"></view>

onPageScroll: function(e) {
  if (e.scrollTop > 200) {
    this.setData({
      isActive: true
    });
  } else {
    this.setData({
      isActive: false
    });
  }
}

4).元素隐藏

hidden="{{...}}"

5).toggleClass

<view class="listToggleArrow {{MenuTwoListActive?'active':''}}" bindtap="toggleMenuTwoList"></view>

toggleMenuTwoList: function() {
  this.setData({
    MenuTwoListActive: !this.data.MenuTwoListActive
  })
}

6).navigator组件

<navigator url="/pages/setting/setting">去设置</navigator>
<navigator open-type="switchTab" url="/pages/index/index">去购物</navigator>

通过函数跳转

wx.navigateTo({
  url: '../setting/setting'
})
wx.switchTab({
  url: '../cart/cart'
})

app.json

{
  "tabBar": {
    "list": [{
      "pagePath": "pages/cart/cart",
      "text": "购物车"
    }]
  }
}

返回上一页

wx.navigateBack({
  delta: 1 
})

获取路由列表

getCurrentPages()

注意事项：在app.json里，把 navigator 对应的 url 配置在”tabBar”的”list”里面了，必须设置open-type="switchTab"否则不会跳转。
相关文档：https://developers.weixin.qq.com/miniprogram/dev/component/navigator.html
https://developers.weixin.qq.com/miniprogram/dev/api/route/wx.navigateBack.html
页面路由：https://developers.weixin.qq.com/miniprogram/dev/framework/app-service/route.html

7).scroll-view横向

<scroll-view class="menu" scroll-x style="width: 100%">
  <text class="active">全部</text>
  <text>玉米</text>
  <text>凉拌</text>
  <text>私房菜</text>
  <text>家常菜</text>
  <text>湘菜</text>
  <text>粤菜</text>
  <text>西北菜</text>
</scroll-view>

.menu{
  white-space: nowrap;
}
.menu text{
  display: inline-block;
}
.menu text:last-child{
  margin-right: 50rpx;
}

隐藏滚动条

::-webkit-scrollbar{
  width: 0;
  height: 0;
  color: transparent;
}

提示：开发工具中有时候无法滑动，在手机上查看具体效果。

8).url传参
跳转

wx.navigateTo({
  url: '../prodcut/prodcut?id=' + id
})

接收

onLoad: function (options) {
    let id = options.id
}

9).弹框

wx.showToast({
  title: '成功',
  icon: 'success',
  duration: 2000
})

wx.showLoading({
  title: '加载中',
})

wx.showModal({
  title: '提示',
  content: '这是一个模态弹窗',
  success (res) {
    if (res.confirm) {
      console.log('用户点击确定')
    } else if (res.cancel) {
      console.log('用户点击取消')
    }
  }
})

10).页面渲染数据中的loading状态
setData有回调函数

this.setData({}, () => {
  wx.hideToast()
})

11).富文本转码

escape2Html: function (str) {
    var arrEntities = { 'lt': '<', 'gt': '>', 'nbsp': ' ', 'amp': '&', 'quot': '"' };
    return str.replace(/&(lt|gt|nbsp|amp|quot);/ig, function (all, t) { return arrEntities[t]; });
}

12).兼容性
1,。华为手机对类数组对象无法遍历，其它浏览器会自动处理

goods:{
  1:{a:1},
  2:{b:2}
}

转为数组

var goodsData = goods
var fixGoods = []
var isArrayTest = Array.isArray(goodsData)
if(isArrayTest){
  fixGoods = goodsData
}else{
  for(let key in goodsData){
    fixGoods.push(goodsData[key])
  }
}

13).图片宽度100%，高度自适应

<image mode="widthFix" style="width:100%;" src="url"></image>

等比缩放，宽度100%，容器内居中

<image mode="widthFix" style="width:100%;" src="url"></image>
position: relative;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);

正方形容器

.outer{
  width:33%;
  height: 0;
  padding-bottom: 33%;
  position: relative;
}
.inner{
  width:100%;
  height: 100%;
  position: absolute;
}

14).禁止下拉加载
"enablePullDownRefresh": false

15).hover-class,增强小程序触感，提高用户交互感知度

<view hover-class='hover_btn'>
  ...
</view>

16).button按钮设置样式无效
开发工具中正常，手机中看不生效
app.json文件中删除如下内容

"style": "v2"

设置open-type="getPhoneNumber"发现无论如何改动，点击同一行的input都会误触到button。
解决方案：将button另外放一行，通过移动位置到和Input同一行

17).form表单通过bindsubmit一次取出所有值,注意name属性

<form data-id="{{item._id}}" bindsubmit="formSubmit">
  <input value="{{item.name}}" name="name" type="text"/>
  <input value="{{item.value}}" name="value" type="text"/>
  <button formType="submit">保存</button>
  <button data-id="{{item._id}}" bindtap='delete'>删除</button>
</form>
formSubmit:function (e){
  var id = e.currentTarget.dataset.id
  var name = e.detail.value.name
  var value = e.detail.value.value
}

18).字体

宋体		 SimSun
黑体		 SimHei
微软雅黑		 Microsoft Yahei
微软正黑体	 Microsoft JhengHei
楷体		 KaiTi	
新宋体		 NSimSun	
仿宋		 FangSong

真机上并没有效果

19).调用组件中的事件

<component-name id="componentId"></component-name>
this.selectComponent("#componentId").subComponentMethod()

20).npm安装
https://developers.weixin.qq.com/miniprogram/dev/devtools/npm.html

21).textarea换行
给需要显示的文本加上<text></text>标签，<view></view>无效

21).普通文本换行
css添加white-space:pre-wrap;

22).获取图片的原始尺寸

<image hidden="true" src="{{product.url[0]}}" bindload="imageLoad"></image>
imageLoad: function (e) {
    var width = e.detail.width
    var height = e.detail.height
}

23).头像设置大小及圆角

<open-data class="avatar" type="userAvatarUrl"></open-data>

.avatar{
  display: inline-block;
  width: 80rpx;
  height: 80rpx;
  border-radius: 50%;
  overflow: hidden;
}

24).radio自定义样式

radio .wx-radio-input{}                                 
radio .wx-radio-input.wx-radio-input-checked{}          //选中
radio .wx-radio-input.wx-radio-input-checked::before    //选中后的白色对勾

25).长按事件
bindlongpress
链接：https://developers.weixin.qq.com/miniprogram/dev/framework/view/wxml/event.html#事件的使用方式

26).阻止蒙版底部滚动
<view class="mask" catchtouchmove='ture'></view>

27).content-type

method:'get',
header: {
    'content-type': 'application/json'
}

method:'POST',
header: {
    'content-type': 'application/x-www-form-urlencoded'
}

98).隐藏接口

wx.onAppRoute(res=>{})
wx.chooseContact()

98).插件
图片裁剪：https://github.com/wx-plugin/image-cropper

99).注意事项
1.image标签不能放入text标签中，否则不显示
2.标签中data传值，大小写

<view data-communitysId="{{item.communitysId}}" bindtap="fun"></view>

fun: function (e) {
  let communitysId = e.currentTarget.dataset.communitysid      // 这里communitysId无法取到值
}

3.setStorage和setStorageSync参数格式差异

wx.setStorage({
  key:"userInfo",
  data:e.detail
})
wx.setStorageSync('userInfo',e.detail)

4.scroll-view上通过变量动态设置高度会显示undefined

<scroll-view style="{{scrollHeightLeft}"></scroll-view>

这里显示有问题，查看元素的实际高度可以发现其实已经生效了

<scroll-view style="height:undefinedpx"></scroll-view>

5.云开发数据库不返回数据，尝试修改权限
6.非tab页面调用wx.setTabBarBadge()无效，必须tab页面才可以
7.一般的非tab页面，数据加载放在onShow/onLoad效果一样，不过如果这个页面包含子页面并且子页面编辑后返回需要在这个页面更新数据，那么数据加载就要放在onShow中
8.textarea点击完成后取不到值
解决:给input和textarea绑定两个事件,input事件,和blur失去焦点事件,来给输入框的内容赋值，
其他bindconfirm，隐藏键盘上的完成按钮show-confirm-bar=""

云开发
1.数据更新
手动添加到云数据库中的记录是无法修改的，因为缺少openid也就无法确认操作者的身份，因此如果数据需要更新就先用add创建，这样就可以正常操作
用户在小程序端往云存储和数据库里写和读取数据时都默认带了openid为当前用户的openid的条件

安卓手机：素材提取
路径：内部存储–>tencent–>MicroMsg–>wxafiles–>很多字母数字组合的文件夹(按照时间排序即可找到最近的浏览素材)