添加转发功能
在.js的page中添加
onShareAppMessage:function(){
return{
title:'创收生活',
path:'pages/index/index'
}
},
点击事件处理
在.wxml中设置组件
<view class="usermotto">
<text class="user-motto">{{motto}}</text>
<text class="usertext" bindtap='click'>{{text}}</text>
</view>
使用bindtap绑定js处理函数
在.js中进行函数处理
在page中添加
click:function(){
console.log("click")
},
会在控制台输出click字符串
点击按钮修改页面内容
首先使用data定义wxml中变量内容
然后定义一个按钮
<button bindtap='changetext'>senddata</button>
在js中实现该函数
changetext:function(){
this.setData({
text:"text changed"
})
},
通过this.setData函数可以修改data中相应key的value值，在显示界面显示该key的组件的内容也会变化
变量作用域、文件作用域
在一个.js中声明的变量和函数只在当前页面下有效
不过在app.js中的APP的globalData数据为全局数据
获取用户信息
console.log(this.globalData.userInfo)只能获取用户昵称，用户设置的国家和性别
WXML的数据绑定是什么意思
在wxml文件中使用{{}}定义一个变量
可以在.js的data中设置key和value值，在{{}}中和key一样的值将会获得该key的value值
警告Now you can provide attr “wx:key” for a “wx:for” to improve performance
<view wx:for-item="item" wx:for="{{array}}" wx:key="id"> {{item}} </view>这样无警告
<view wx:for-item="item" wx:for="{{array}}"> {{item}} </view>这样有警告
微信的意思是如果你的列表不是静态的最好给每一个元素即item添加一个唯一的id或者说唯一的字符串或数字，而且最好不要动态改变
条件渲染
根据不同的条件决定是否渲染出现该组件
<view wx:if="{{view == 'WEBVIEW'}}"> WEBVIEW </view>
<view wx:elif="{{view == 'APP'}}"> APP </view>
<view wx:else="{{view == 'MINA'}}"> MINA </view>
可以在.js中使用setData改变key的值，wxml文件中的界面也会跟着key的改变而改变
获取点击事件的详细信息
可以获取组件中使用data-设置的信息
<button id="tap" data-hidden='jjjjj' data-k="kkkkk" bindtap='tapname'>senddata</button>
在.js文件中添加定义的函数
tapname: function (event){
console.log(event)
},
在控制台中会显示
{type: "tap", timeStamp: 2973, target: {…}, currentTarget: {…}, detail: {…}, …}
changedTouches
:
[{…}]
currentTarget
:
{id: "tap", offsetLeft: 106, offsetTop: 650, dataset: {…}}
detail
:
{x: 156, y: 673.6000366210938}
target
:
{id: "tap", offsetLeft: 106, offsetTop: 650, dataset: {…}}
打印出的event信息属性
https://developers.weixin.qq.com/miniprogram/dev/framework/view/wxml/event.html
事件绑定
在上面事件绑定使用的是bindtap加函数名，由bind和事件类型tap组成
事件绑定的写法为key="value",value即函数名
微信的wxs
类似jsp页面的写法，即在html中添加java代码，而wxs则是在wxml中添加一套脚本语言，这个语言不同于javascript
不同页面设置不同的标题
在不同的页面目录下，新建页面名称.json文件，添加navigationBarTitleText属性
{
“navigationBarTitleText”: “首页”
}
文字方框显示格式
在.wxss中添加
.result {
overflow-x: scroll;
margin: 10px;
padding: 10px;
font-size: 14px;
border-radius: 5px;
border: 1px solid #DDD;
}
在.wxml中使用
<view class='result'>
<text space="nbsp">jjjjjjjjjjjjjj</text>
</view>
使用按钮的方式跳转界面
在.wxml界面设置按钮
<button type="default" size="{{defaultSize}}" loading="{{loading}}" plain="{{true}}"
disabled="{{disabled}}" bindtap="setdefault" hover-class="other-button-hover">首页 </button>
<button type="primary" size="{{defaultSize}}" loading="{{loading}}" plain="{{true}}"
disabled="{{disabled}}" bindtap="settext" hover-class="other-button-hover">text1 </button>
在.js文件中进行处理
setdefault:function(){
wx.navigateTo({
url: '../first/first'
})
},
settext:function(){
wx.navigateTo({
url: '../text1/text1'
})
},
选取本地照片显示在image中
<image style="width: 200px; height: 200px; background-color: #eeeeee;" mode="{{mode}}" src="{{src}}" bindtap='imgtap'></image>
setimg:function(){
var _this =this
wx.chooseImage({
count: 1, // 默认9
sizeType: ['original', 'compressed'], // 可以指定是原图还是压缩图，默认二者都有
sourceType: ['album', 'camera'], // 可以指定来源是相册还是相机，默认二者都有
success: function (res) {
// 返回选定照片的本地文件路径列表，tempFilePath可以作为img标签的src属性显示图片
var tempFilePaths = res.tempFilePaths
_this.setData({
src: tempFilePaths
})
//this.src=tempFilePaths
}
})
},
点击图片弹出消息提示框
imgtap:function(){
wx.showToast({
title: '成功',
icon: 'success',
duration: 2000
})
},
点击图片弹出loading提示框，指定时间后隐藏
imgtap:function(){
wx.showLoading({
title: '加载中',
})
setTimeout(function () {
wx.hideLoading()
}, 2000)
},
点击图片弹出模态弹窗可以点击确定或取消
imgtap:function(){
wx.showModal({
title: '提示',
content: '这是一个模态弹窗',
success: function (res) {
if (res.confirm) {
console.log('用户点击确定')
} else if (res.cancel) {
console.log('用户点击取消')
}
}
})
},
调用扫码功能
<button type="default" size="mini" bindtap="setcode">扫码 </button>
setcode:function(){
wx.scanCode({
onlyFromCamera: true,
success: (res) => {
console.log(res)
}
})
},
radio-group修改大小，radio修改大小
.radio{
zoom:0.5;
text-align: center;
}
————————————————
版权声明：本文为CSDN博主「流氓兔来啦」的原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接及本声明。
原文链接：https://blog.csdn.net/superce/article/details/79962683
