• 微信小程序笔记


    js文件中 

    onload : function(){

    //适合发请求,获取数据以后,进行页面的更新

    }

     

               

     标签绑定属性 必须以data- 开头

    分享:

      =>    

      usePageEvent('onShow', () => {
        getDetail();
          Api.showShareMenu({
              withShareTicket:true,
              menus:['shareAppMessage','shareTimeline'],
              success:()=>{
              }
          })
      })

     

    import {Button as OneButton} from 'remax/one';
    import {Image} from 'remax/one';
     <View className={styles.share}>
                <OneButton className={styles.home_share} wechat-open-type="share" hoverClassName={'hover-tap'}>
                    <Image src={'../../../assets/share.png'} style={{'80px',height:'80px'}}/>
                </OneButton>
     </View>

     

    1.交互过程

    2.常用API

    • bindinput与bindsubmit

    一个是表单,一个是文本输入框,两者有一个共同点,就是可以去获取到用户的输入信息

    • wx.getStorageSync

    同步获取本地存储的数据

    • this.setData() 

    用于将数据从逻辑层发送到视图层(异步),同时改变对应的 this.data 的值(同步)。

    直接修改this.data,而不调用this.setData(),是无法改变当前页面的状态的,会导致数据不一致

    •  wx.previewImage(url) 

    预览图片

    • wx.createSelectorQuery()

    操作dom元素节点 

    1 const query = wx.createSelectorQuery()                // 创建节点查询器 query
    2 query.select('#productServe').boundingClientRect()    // 这段代码的意思是选择Id=productServe的节点,获取节点位置信息的查询请求

    3.遇到的坑:

    • 接收的地址 中有w.h代表固定的宽高,你要给它值,所以要在模板上进行地址过滤
     <image wx:for="{{item.images}}" src="{{tools(item)}}" bindtap='showPreview' data-url="{{tools(item)}}" wx:key='{{index}}' />
    
    //地址过滤(直接写JS脚本语言)
    <wxs module="tools">
      module.exports = function(url) {
        return url.replace('w.h','200.200');
      }
    </wxs>
    •  点击后没有获取data-XXX属性

    检测是不是精准的点击到了当前元素,可能点到了别的元素。

    取到的数据里面包含了其他的数组,也需要循环,你用item的话 就不知道是哪个item

    //解决方法:用其他元素代替item
    <view class="comments" wx:for="{{shop.comments}}" wx:key='{{index}}' wx:for-item='element'>
      <view class="item" >
        <text class="name">{{element.name}}</text>
        <text class="date">{{element.data}}</text>
        <view class='star-box'>
             <view >★★★★★</view> 
             <view class="star-after" style="{{element.rating}}">★★★★★</view>
        </view>
      
        <text class="content">{{element.content}}</text>
        <view class="images" >
          <image wx:for="{{element.images}}" src="{{tools(element)}}" bindtap='showPreview' data-url="{{tools(element)}}" wx:key='{{index}}' />
        </view>
      </view>
    </view>
    
    •   API请求 500和404 不再fail函数中 , 而在 success中, 所以没有捕捉到
      const post = (url,data,timeout=15000) => {
        return new Promise((resolve, reject) => {
          let token = Api.getStorageSync('token');
          if (token == null) {
            Api.showToast({
              title: '请先登录',
              icon: 'none',
              duration: 2000
            });
            return false;
          }
      
          Api.request({
            url: baseUrl + url,
            method: 'POST',
            data: data,
            header: {
              ...header,
              authorization: token
            },
            timeout,
            success: (res) => {
                resolve(res.data);    // 这里有个常识坑, resolve后, 数据就被抛出了 所以后面就不能reject了 要进行状态判断
                if(res.statusCode !== 200){
                  reject(res);
              }
            },
            fail: (err) => {
              reject(err);
            }
          })
        })
      }

      改成这样即可 

          success: (res) => {
              if(res.statusCode === 200){
                  resolve(res.data);
              }else {
                  reject(res);
              }
            },
  • 相关阅读:
    [Zabbix5.0]Transaction check error: file /etc/my.cnf from install of Percona-Server-shared-56-5.6.48-rel88.0.1.el7.x86_64 conflicts with file from package mysql-community-server-5.7.30-1.el7.x86_64
    [CentOS7]Delta RPMs disabled because /usr/bin/applydeltarpm not installed.
    [CentOS7]YUM只下载不安装
    [CentOS7]expect传参
    [CentOS7]查询FCSAN WWN
    [Docker]WARNING: IPv4 forwarding is disabled. Networking will not work.
    [Docker]CentOS8.2安装 Docker-compose
    [CentOS8]安装vmware tools
    [CentOS8]弹出CDROM
    书单
  • 原文地址:https://www.cnblogs.com/it-Ren/p/11128106.html
Copyright © 2020-2023  润新知