学习微信小程序中遇到的一些小问题

在学习小程序的过程中，遇到一些与pc端开发不同的地方，于是有如下总结，也有一些是在以前没有及时总结的内容也在此做了对应总结。（大多都是一些基础入门知识，欢迎大佬指点）

一、样式

1. 在微信小程序中，不支持通配符标签 * 。可以使用简单粗暴的多个标签重置样式方法

   page,view,text,swiper,swiper-item,image,navigator{
    padding: 0;
    margin: 0;
    box-sizing: border-box;
   }
   

2. 设置文字过多时，超出部分显示省略号样式：

   /* 单行 */
   overflow:hidden; 
   text-overflow:ellipsis; 
   white-space:nowrap;
   
   
   /* 多行 */
   overflow: hidden;
   text-overflow: ellipsis;
   display: -webkit-box;
   -webkit-box-orient: vertical
   -webkit-line-clamp: 2; //显示的行数
   

二、js

1. 动态绑定数据

   在微信小程序中没有像vue中"v-model"那样的语法糖，但可以使用this.data获取到页面data对象的数据。但要想将数据同步更新页面，使用简单的赋值语句this.data = XXX是行不通的。需要使用this.setData()方法来为指定的数据赋值并同步更新数据到页面。实现双向绑定。同时，在更新了数据后想要页面重新渲染也可以执行this.setData({data})

2. data-XX语法

   在循环渲染中，要获取当前的元素的内容，对其进行一系列逻辑处理，使用如下代码

   WXML代码:
   
   <view
       wx:for="{{list}}"
       wx:key="index"
       bindtap="handleTap"
       data-index="{{index}}"
       data-item="{{item}}"
   >
   	<text>{{item}}</text>
   </view>
   

   JS代码：
   
   handleTap(e){
   	console.log(e.currentTarget.dataset)
   }
   //打印结果是一个对象，包含index属性和item属性。分别表示，当前元素的索引和当前元素的内容
   

   data-XX语法中的 'XX’可以自己任意定义，赋的值必须是js中存在的。然后在当前的tap事件中可以通过e.currentTarget.dataset获取到我们设定的值。

3. 在微信小程序中获取dom元素，进行原生dom操作？

   //文档中API WXML wx.createSelectorQuery()
   
   const query = wx.createSelectorQuery()
   query.select('#the-id').boundingClientRect()
   query.selectViewport().scrollOffset()
   query.exec(function(res){
     res[0].top       // #the-id节点的上边界坐标
     res[1].scrollTop // 显示区域的竖直滚动位置
   })
   

4. 微信支付权限

   只有企业账号或注册商户才可以实现微信支付

   企业账号的小程序后台中，必须给开发者添加白名单

   一个appid可以同时绑定多个开发者 这些开发者可以共用这个appid和它的开发权限

   微信支付流程为：开发流程

   ​ 1) .创建订单

   ​ 2).获取订单编号

   ​ 3).发起预支付

   ​ 4).发起支付

   ​ 5).支付状态查询