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

在学习小程序的过程中,遇到一些与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).支付状态查询

你可能感兴趣的:(微信小程序,小程序)