小程序
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
})
},