小程序学习笔记以及自己的理解

小程序   

bindtap="changeName" 这个是绑定事件,用这个触发
例:<button bindtap="changeName"> Click me! </button> 
然后再 js页面
  changeName: function (e) {
    this.setData({
      name: 'MINA'
    })
  }

banner:

<swiper id="banner" interval="2000" duration="1000" autoplay circular indicator-dots>
<block wx:for="{{imgUrls}}">
        <swiper-item>
            <image src="{{item}}" mode="scaleToFill" style="width:750rpx;"></image>
        </swiper-item>
 </block>
    </swiper>

data: {
    motto: 'Hello World',
    userInfo: {},
    imgUrls: [
      'http://img02.tooopen.com/images/20150928/tooopen_sy_143912755726.jpg',
      'http://img06.tooopen.com/images/20160818/tooopen_sy_175866434296.jpg',
      'http://img06.tooopen.com/images/20160818/tooopen_sy_175833047715.jpg'
    ],
    hasUserInfo: false,
    indicatorDots: false,
    autoplay: false,
    interval: 5000,
    duration: 1000,
    canIUse: wx.canIUse('button.open-type.getUserInfo')
  },

<navigator url="/pages/about/about?title=redirect" hover-class="navigator-hover">跳转到新页面</navigator>

这种带参数的链接。在about页面里面的 onLoad 自动加载。 
 onLoad: function (options) {
    if (app.globalData.userInfo) {
      this.setData({
        userInfo: app.globalData.userInfo,
        hasUserInfo: true,
        title: options.title
      })
    }
}

然后wxml页面就 {{title}} 调用就好了

app.josn 页面配置底部的链接
 "tabBar": {
      "color": "#7A7E83",
      "selectedColor": "#FF8601",
      "borderStyle": "white",
      "backgroundColor": "#ffffff",
      "list": [
        {
          "pagePath": "pages/index/index",
          "iconPath": "image/yeye_order_sel.png",
          "selectedIconPath": "image/1139144.jpg",
          "text": "首页"
        },
        {
          "pagePath": "pages/index/index",
          "iconPath": "image/yeye_order_sel.png",
          "selectedIconPath": "image/1127960.jpg",
          "text": "购物车"
        },
        {
          "pagePath": "pages/index/index",
          "iconPath": "image/yeye_order_sel.png",
          "selectedIconPath": "image/520017.jpg",
          "text": "用户"
        }
      ]
    }

    var that = this
    wx.request({
      url: 'http://localhost/test/wx.php', //仅为示例，并非真实的接口地址
      data: {
        x: '',
        y: ''
      },
      header: {
        'content-type': 'application/json' // 默认值
      },
      success: function (res) {
        console.log(res.data)
        that.setData({
          goodlist: res.data
        })
      }
    })
//  var that = this 这个是个坑，按照手册上面的来就报错,加了这句话就好了.
如果是用 post方式传, 需要加上 header: {'content-type': 'application/x-www-form-urlencoded'}就好了

wx.php 页面内容，转换成 josn;
<?php 
$arr = array(
        array('id'=>11,'name'=>'jiazuqian','age'=>18),
        array('id'=>12,'name'=>'jaizukun','age'=>19),
        array('id'=>16,'name'=>'liyuan','age'=>20)
        );
print_r(json_encode($arr));

然后就是wxml页面，循环下，输出
<view wx:for="{{goodlist}}" wx:for-index="idx" wx:for-item="itemName">
    {{itemName.name}}
</view>

wx:for-item="itemName" 这句话的意思是给 goodlist  取一个别名 idx 就是给索引就是key取一个别名




?>

//微信是封装过if语句的，你只要在index.js中设置好值，然后就可以直接想这样拿来判断了，还有这是class=“view”效果放在判断语句中是没有效果的
<view class="page">
<view class="view" >
<view wx:if="{{you}}">true</view>
<view wx:else>false</view>
</view>
//三目运算，你可以比较一下这俩，上边判断true和false的方法，自己认为哪个简单用哪个
<view class="view" >
<block wx:if="{{you?true:false}}">
<view>aa</view>
<view>bb</view>
</block>
<view>---------------------------</view>
//其实挺简单的这样，相对于java和C++来说，这里直接写判断的数据就OK了
<view class="view">
<view  wx:if="{{diao>20}}">你很棒</view>
<view wx:elif="{{diao==15}}">还算是个中国人</view>
<view wx:else>只能去日本了</view>
</view>
<view>---------------------------</view>
//如果你一个判断条件下有好几个view就用block标签，他算是个万能标签，什么属性都可以往里写，所以遇到复杂的视图时记得用它。
<view class="view" >
<block view class="view" wx:if="{{you}}">
<view>你</view>
<view>很</view>
<view>叼</view>
</block>
<block wx:else>
<view>你</view>
<view>很</view>
<view>菜</view>
</block>
</view>

</view>
</view>

这个是可以上下滑动的选择器。
<view class="section">
  <view class="section__title">普通选择器：</view>
  <picker bindchange="bindPickerChange" value="{{index}}" range="{{array}}">
    <view class="picker">
      当前选择：{{array[index]}}
    </view>
  </picker>
</view>

然后再page 里面写上需要选择的数据

 array: ['中国', '美国', '巴西', '俄罗斯'],
     objectArray: [
       {
         id: 0,
         name: '中国'
       },
       {
         id: 1,/*  */
         name: '美国'
       },
       {
         id: 2,
         name: '巴西'
       },
       {
         id: 3,
         name: '俄罗斯'
       }
     ],

最后是绑定，触发，如果是要发送的后的话，就用wx.request  

  bindPickerChange: function (e) {
    console.log('picker发送选择改变，携带值为', e.detail.value)
    this.setData({
      index: e.detail.value
    })
  },