E企盈营销工具技术服务商 热线:4006-838-530

微信小程序常用代码段

E企盈直播平台营销卖货系统

添加转发功能在.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 performanceview 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;}

赞(0) 打赏
未经允许不得转载:E企盈小程序开发-热线:4006-838-530 » 微信小程序常用代码段
分享到: 更多 (0)
E企盈小程序直播营销卖货系统
E企盈直播平台营销卖货系统

评论 抢沙发

E企盈小程序开发

联系我们联系我们

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏