小程序笔记(view:1038)

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>

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

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

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

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

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

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