微信小程序> 微信小程序代码实例-微信小程序常用代码段-微信小程序实例

微信小程序代码实例-微信小程序常用代码段-微信小程序实例

浏览量:4170 时间: 来源:流氓兔来啦

1.添加转发功能

在.js的page中添加onShareAppMessage:function(){return{title:'创收生活',path:'pages/index/index'}},

2.点击事件处理

在.wxml中设置组件viewclass="usermotto"textclass="user-motto"{{motto}}/texttextclass="usertext"bindtap='click'{{text}}/text/view使用bindtap绑定js处理函数在.js中进行函数处理在page中添加click:function(){console.log("click")},会在控制台输出click字符串

3.点击按钮修改页面内容

首先使用data定义wxml中变量内容然后定义一个按钮buttonbindtap='changetext'senddata/button在js中实现该函数changetext:function(){this.setData({text:"textchanged"})},通过this.setData函数可以修改data中相应key的value值,在显示界面显示该key的组件的内容也会变化

4.变量作用域、文件作用域

在一个.js中声明的变量和函数只在当前页面下有效不过在app.js中的APP的globalData数据为全局数据

5.获取用户信息

console.log(this.globalData.userInfo)只能获取用户昵称,用户设置的国家和性别

6.WXML的数据绑定是什么意思

在wxml文件中使用{{}}定义一个变量可以在.js的data中设置key和value值,在{{}}中和key一样的值将会获得该key的value值

7.警告Nowyoucanprovideattr“wx:key”fora“wx:for”toimproveperformance

viewwx:for-item="item"wx:for="{{array}}"wx:key="id"{{item}}/view这样无警告viewwx:for-item="item"wx:for="{{array}}"{{item}}/view这样有警告微信的意思是如果你的列表不是静态的最好给每一个元素即item添加一个唯一的id或者说唯一的字符串或数字,而且最好不要动态改变

8.条件渲染

根据不同的条件决定是否渲染出现该组件viewwx:if="{{view=='WEBVIEW'}}"WEBVIEW/viewviewwx:elif="{{view=='APP'}}"APP/viewviewwx:else="{{view=='MINA'}}"MINA/view可以在.js中使用setData改变key的值,wxml文件中的界面也会跟着key的改变而改变

9.获取点击事件的详细信息

可以获取组件中使用data-设置的信息buttonid="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

10.事件绑定

在上面事件绑定使用的是bindtap加函数名,由bind和事件类型tap组成事件绑定的写法为key="value",value即函数名

11.微信的wxs

类似jsp页面的写法,即在html中添加java代码,而wxs则是在wxml中添加一套脚本语言,这个语言不同于javascript

12.不同页面设置不同的标题在不同的页面目录下,新建页面名称.json文件,添加navigationBarTitleText属性{“navigationBarTitleText”:“首页”}

13.文字方框显示格式

在.wxss中添加.result{overflow-x:scroll;margin:10px;padding:10px;font-size:14px;border-radius:5px;border:1pxsolid#DDD;}在.wxml中使用viewclass='result'textspace="nbsp"jjjjjjjjjjjjjj/text/view

14.使用按钮的方式跳转界面

在.wxml界面设置按钮buttontype="default"size="{{defaultSize}}"loading="{{loading}}"plain="{{true}}"disabled="{{disabled}}"bindtap="setdefault"hover-class="other-button-hover"首页/buttonbuttontype="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'})},

15.选取本地照片显示在image中

imagestyle="width:200px;height:200px;background-color:#eeeeee;"mode="{{mode}}"src="{{src}}"bindtap='imgtap'/imagesetimg:function(){var_this=thiswx.chooseImage({count:1,//默认9sizeType:['original','compressed'],//可以指定是原图还是压缩图,默认二者都有sourceType:['album','camera'],//可以指定来源是相册还是相机,默认二者都有success:function(res){//返回选定照片的本地文件路径列表,tempFilePath可以作为img标签的src属性显示图片vartempFilePaths=res.tempFilePaths_this.setData({src:tempFilePaths})//this.src=tempFilePaths}})},

16.点击图片弹出消息提示框

imgtap:function(){wx.showToast({title:'成功',icon:'success',duration:2000})},

17.点击图片弹出loading提示框,指定时间后隐藏

imgtap:function(){wx.showLoading({title:'加载中',})setTimeout(function(){wx.hideLoading()},2000)},

18.点击图片弹出模态弹窗可以点击确定或取消

imgtap:function(){wx.showModal({title:'提示',content:'这是一个模态弹窗',success:function(res){if(res.confirm){console.log('用户点击确定')}elseif(res.cancel){console.log('用户点击取消')}}})},

19.调用扫码功能

buttontype="default"size="mini"bindtap="setcode"扫码/buttonsetcode:function(){wx.scanCode({onlyFromCamera:true,success:(res)={console.log(res)}})},

20.radio-group修改大小,radio修改大小

.radio{zoom:0.5;text-align:center;}

版权声明

即速应用倡导尊重与保护知识产权。如发现本站文章存在版权问题,烦请提供版权疑问、身份证明、版权证明、联系方式等发邮件至197452366@qq.com ,我们将及时处理。本站文章仅作分享交流用途,作者观点不等同于即速应用观点。用户与作者的任何交易与本站无关,请知悉。

产品经理

手机 : 13312967497

擅长 : 小程序流量变现

扫码领取礼包

最新资讯

热门模板

  • 头条
  • 搜狐
  • 微博
  • 百家
  • 一点资讯
  • 知乎