微信小程序笔记 bindinput与bindsubmit wx.createSelectorQuery()

微信小程序笔记
bindinput与bindsubmit
wx.createSelectorQuery()

微信小程序笔记
bindinput与bindsubmit
wx.createSelectorQuery()

js文件中 

onload : function(){

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

}

微信小程序笔记
bindinput与bindsubmit
wx.createSelectorQuery()

 微信小程序笔记
bindinput与bindsubmit
wx.createSelectorQuery()

           微信小程序笔记
bindinput与bindsubmit
wx.createSelectorQuery()

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

分享:

微信小程序笔记
bindinput与bindsubmit
wx.createSelectorQuery()  =>    微信小程序笔记
bindinput与bindsubmit
wx.createSelectorQuery()

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

微信小程序笔记
bindinput与bindsubmit
wx.createSelectorQuery()

 

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.交互过程

微信小程序笔记
bindinput与bindsubmit
wx.createSelectorQuery()

2.常用API

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

  • 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.遇到的坑:

  • 接收的地址微信小程序笔记
bindinput与bindsubmit
wx.createSelectorQuery() 中有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);
            }
          },