<view bindtap="a" data-f="{{flag}}">123</view>
<!-- wx:for="{{数组}}" 循环需要绑定key wx:key="index"-->
<!-- 自带定义 item 表示数组的每一项 index 表示数组的索引 -->
<!-- 使用wx:for-item修改每一项值的key -->
<!-- 使用wx:for-index修改每一项值的index -->
<view wx:for="{{list}}" class="t" wx:key="i"
wx:for-item="r" wx:for-index="i"
style="color:{{rstyFlag'red':''}};"
data-i="{{i}}"
bindtap="choose"
>
{{rname}}--{{i}}
</view>
js内容：
data: {
flag:1,
list:['冰墩墩','雪融融','小泡菜'],
list:[{
name:'冰墩墩',
styFlag:true
},{
name:'雪融融',
styFlag:false
},{
name:'小泡菜',
styFlag:false
}]
},
choose:function(e){
let { currentTarget:{ dataset:{i} } } = e;
/ 第一步获取点击的当前的内容的索引 /
consolelog(i)
/ 排他 把所有的先置空 /
thisdatalistforEach(r=>{
rstyFlag = false
})
thisdatalist[i]styFlag = true;
/ 数据变了 视图没变 必须要使用setData实现数据和视图的双向数据绑定 /
thissetData({
list:thisdatalist
})
},
a:function(e){
consolelog(e)
},
效果：
wxml内容:
<button bindtap="go1" style="margin: 3px;">张三</button>
<button bindtap="go2" style="margin: 3px;">李四</button>
<button bindtap="go3" style="margin: 3px;">24号</button>
<button bindtap="go4" style="margin: 3px;">不带参数</button>
<button bindtap="goBack">返回上一级</button>
<!-- wx:if 和 wx:elif 以及wx:else之间不可以被其他的标签打断 -->
<block>
<view wx:if="{{msg=='zhangsan'}}" class="t">欢迎回来主人</view>
<view wx:elif="{{msg=='lisi'}}" class="t">家里水龙头没有坏不要过来</view>
<view wx:elif="{{msg=='24'}}" class="t">您好欢迎为您服务</view>
<view wx:else class="t">显示家里没人</view>
</block>
js内容：
Page({
/
页面的初始数据
/
data: {
msg:""
},
goBack:function(){
wxnavigateBack()
},
/
生命周期函数--监听页面加载
/
onLoad: function (options) {
consolelog(optionsname)
/ 多次使用setData会影响性能 尽量把多次setData 使用一次setData来实现
尽量少的使用setData来提高小程序的性能 /
thissetData({
msg:optionsname
})
/ 如果名字叫张三 页面显示欢迎回来主人 /
/ 如果名字叫李四 页面显示家里水龙头没有坏不要过来 /
/ 如果名字叫24号 页面显示您好欢迎为您服务 /
/ 都不是 显示家里没人 /
},
/
生命周期函数--监听页面初次渲染完成
/
onReady: function () {
},
/
生命周期函数--监听页面显示
/
onShow: function () {
},
/
生命周期函数--监听页面隐藏
/
onHide: function () {
},
/
生命周期函数--监听页面卸载
/
onUnload: function () {
},
/
页面相关事件处理函数--监听用户下拉动作
/
onPullDownRefresh: function () {
},
/
页面上拉触底事件的处理函数
/
onReachBottom: function () {
},
/
用户点击右上角分享
/
onShareAppMessage: function () {
}
})
{
"pages": [
"pages/index/index",
"pages/forpage/forpage",
"pages/mypage/mypage",
"pages/logs/logs",
"pages/fenglei/fenglei"
],
"window": {
"backgroundTextStyle": "dark",
"navigationBarBackgroundColor": "#FF0000",
"navigationBarTitleText": "kw47page",
"navigationBarTextStyle": "white"
},
"tabBar": {
"color": "#fff",
"selectedColor": "#FFCA28",
"backgroundColor": "#000",
"list": [{
"pagePath": "pages/index/index",
"text": "首页",
"iconPath": "",
"selectedIconPath": ""
}, {
"pagePath": "pages/logs/logs",
"text": "日志",
"iconPath": "",
"selectedIconPath": ""
}]
},
"style": "v2",
"sitemapLocation": "sitemapjson"
}
效果图：
在组件上使用 wx:for 控制属性绑定一个数组，即可使用数组中各项的数据重复渲染该组件。即wx:for指令用于循环数组数据，生成组件。
循环出来的每一项通过item返回，每一项对应的索引，通过index返回。
wx:key=""，设置每一项唯一的标识。循环列表时，添加wx:key的好处是，将来列表发生变化时重新渲染列表的损耗为更低。
使用 wx:for-item 可以指定数组当前元素的变量名，使用 wx:for-index 可以指定数组当前下标的变量名：
条件渲染可以使用 wx:if 或 hidden 。
一般来说，wx:if 有更高的切换消耗而 hidden 有更高的初始渲染消耗。因此，如果需要频繁切换的情景下，用 hidden 更好；如果在运行时条件不大可能改变，则 wx:if 较好。
wx:if用于条件渲染：条件为真生成里面的内容，条件为假不会生成里面的内容。（每次重新生成内容）
也可以用 wx:elif 和 wx:else 来添加一个 else 块。
hidden用于条件渲染：条件为真隐藏里面的内容，条件为假显示里面的内容。（每次切换样式）
在appjson文件中添加tabBar节点。tabBar是小程序客户端底部或顶部tab栏的实现。
color： tab上的文字默认颜色，仅支持十六进制颜色。
selectedColor： tab上的文字选中时的颜色，仅支持十六进制颜色。
backgroundColor： tab的背景色，仅支持十六进制颜色。
borderStyle： tabbar上边框的颜色， 仅支持 black / white。
position： tabBar的位置，默认值是: bottom，仅支持 bottom / top。当 position 为 top 时，不显示 icon。
custom： 自定义tabBar。
list是一个数组，它定义了tab的列表。只能配置最少2个、最多5个tab。
pagePath： 页面路径，必须在 pages 中先定义。
text： tab 上按钮文字。
iconPath： 路径，icon 大小限制为 40kb，建议尺寸为 81px 81px，不支持网络。
selectedIconPath： 选中时的路径，icon 大小限制为 40kb，建议尺寸为 81px 81px，不支持网络。
跳转到普通页，可以直接通过返回按钮返回。
navigateTo()方法，用于跳转普通页面。可以直接通过返回按钮返回。
页面js文件中添加方法：
redirectTo()方法，关闭当前页面再跳转到指定页，不能通过返回按钮返回页面。该方法不能用于跳转tabBar页面。
页面js文件中添加方法：
跳转到tabBar页面，通过tabBar按钮返回。
如果要使用navigator组件跳转tabBar页面，需要设置open-type="switchTab"。
switchTab()方法，用于跳转tabBar页面。
页面js文件中添加方法：
截至2020年2月，小程序不能跳转网页。
微信小程序实现了应用“触手可及”的梦想，用户扫一扫或者搜一下即可打开应用。也体现了“用完即走”的理念，用户不用关心是否安装太多应用的问题。应用将无处不在，随时可用，但又无需安装卸载。
微信小程序能够实现消息通知、线下扫码、公众号关联等七大功能。其中，通过公众号关联，用户可以实现公众号与微信小程序之间相互跳转。
扩展资料除了添加小程序卡片外，公众号图文消息有两种进入小程序的方式：支持通过蓝色文字链接或链接跳转到小程序。
1、推送形式更多样
公众号运营者在编辑图文消息时，可以将已关联的小程序以蓝色文字链接或的方式添加到图文消息的正文中，用户点击就能进入到小程序。
2、支持自定义编辑
公众号运营者可以自定义小程序的和蓝色文字链接的文字内容，以及指定小程序打开的页面。此功能对所有公众号开放。
参考资料来源：百度百科--微信小程序
参考资料来源：人民网--微信小程序又更新：两个新功能超实用
1小程序可以跳转一个网页2但 小程序暂不支持跳转到APP Store。3ofo的小程序里面有个广告，点击可以离开微信跳转至appstore。那是广告，你花钱投广告就可以。若风 10:00:52
小程序暂不支持跳转应用宝
若风 10:02:32
接入广告系统的小程序可以打开应用宝。
欢迎分享，转载请注明来源：内存溢出
微信扫一扫
支付宝扫一扫
评论列表（0条）