美文网首页
微信小程序笔记

微信小程序笔记

作者: 两分与桥 | 来源:发表于2018-07-23 16:32 被阅读127次

    初始化数据格式

      data: {
        text : "js中传递的数据文本",
        btn : "测试按钮",
        show : true,
        news  : ['aaa','bbb','ccc','ddd'],
      },
    

    变更设置数据

    this.setData({text:"change", show:!this.data.show, news:data})
    

    绑定事件

    .wxml 文件中
    <button type="default" bindtap='myclickfunc'>{{btn}}</button>
    <text>{{text}}</text>
    

    .js 文件中

      myclickfunc: function () {
        console.log("you click me");
        this.setData({text:"change"})
      }
    

    绑定事件中,bind和catch

        bind 会扩散事件传播
        catch 不会扩散事件
    

    例子:快递单号查询

    注意:如果遇到 请求域名不在合法的requests中,设置 详情--项目设置--勾选不设置合法域名



    这只是临时的解决办法,其他的我还未找到

    .wxml 文件

    
    <view class="container">
    
      <input placeholder="请输入快递单号" bindinput='input'/>
    
      <button bindtap="myclickfunc" type='primary' class='mybutton'>查询</button>
    </view>
    
    <view wx:if="{{get_data.reason}}">
      获取状态:{{get_data.reason}}
      公司:{{get_data.result.company}}
    </view>
    
    <view wx:for="{{get_data.result.list}}">
      {{item.remark}}-----{{item.datetime}}
    </view>
    

    .wxss 文件

    /* pages/three/three.wxss */
    
    input{
      border: 1px solid red;
      width: 85%;
      margin-left: 8%;
      padding: 10px;
    }
    
    .mybutton{
      margin-top: 10px;
    }
    

    .js 文件

    Page({
      data: {
        input_data : null,
        get_data : null,
      },
    
      myclickfunc: function () {
    [图片上传中...(无标题.png-734173-1532335465825-0)]
        var thispage = this;   把全局的this用变量存下来
          wx.request({
            url: 'https://v.juhe.cn/exp/index?com=yt&dtype=&key=b84dcae62cc8e58c804d5f4b53423df9&no='+this.data.input_data,
            data: {
              x: '',
              y: ''
            },
            header: {
            },
            success: function (res) {
              thispage.setData({get_data:res.data})    这里不能设置this.setData,因为这里的this根本就不是指代全局的this
            }
          })
        console.log(this.data.input_data);           测试单号:800557539630418350
        },
    
      input: function (event) {
        this.setData({input_data: event.detail.value});
      }
    })
    

    最终效果(有些简陋,不过还是可以的)



    点击绑定跳转页面
    index.wxml

      <view class="view-article" bindtap='view1click'>
        <text>文章1</text>
      </view>
    

    index.js

      view1click: function () {
        wx.navigateTo({
          url: '../logs/logs?id=1'
        })
      }
    

    上面路径中的id可以由log.js取得

    onLoad: function (options) {
        console.log("----logs onLoad----");
        console.log(options);     ----> 打印结果::{id: "1"}
        this.setData({id:options.id}); 
      },
    

    另一种绑定跳转的方式,同样有效

      <navigator url='../logs/logs?id=100'>
      <view class="view-article">
        <text>文章1</text>
      </view>
      </navigator>
    

    相关文章

      网友评论

          本文标题:微信小程序笔记

          本文链接:https://www.haomeiwen.com/subject/gqujmftx.html