添加转发功能
在.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 /viewview wx:elif="{{view == 'APP'}}" APP /viewview 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;}













