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.html10.事件绑定
在上面事件绑定使用的是bindtap加函数名,由bind和事件类型tap组成事件绑定的写法为key="value",value即函数名11.微信的wxs
类似jsp页面的写法,即在html中添加java代码,而wxs则是在wxml中添加一套脚本语言,这个语言不同于javascript12.不同页面设置不同的标题在不同的页面目录下,新建页面名称.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/view14.使用按钮的方式跳转界面
在.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;}
微信小程序代码实例-微信小程序常用代码段-微信小程序实例
浏览量:4170
时间:
来源:流氓兔来啦
版权声明
即速应用倡导尊重与保护知识产权。如发现本站文章存在版权问题,烦请提供版权疑问、身份证明、版权证明、联系方式等发邮件至197452366@qq.com ,我们将及时处理。本站文章仅作分享交流用途,作者观点不等同于即速应用观点。用户与作者的任何交易与本站无关,请知悉。
最新资讯
-

即速应用,赋能企业玩转微信小程序智慧经营
作为国内领军的智慧商业经营服务商,即速应用始终秉承“让每个企业都拥有自己的智慧店铺”的愿景,持续赋能更多企业玩转智慧经营。即速应用旗下拥有“小程序搭建工具-即速应用”、“私域流量专家-即客云”等产品,帮助商家打通互联网全生态营销闭环。 -

即客云2.0重磅更新,让微信小程序运营更简单!
即客云作为一款基于企业微信的第三方工具,现从多维度提供超过30种功能,自上线以来,已服务多家企业,受到一致好评。近期,我们根据客户反馈和市场调研正式推出升级版 即客云2.0!更新了私域运营SOP,群日历功能,批量拓客,客户雷达,消息推送,个人欢迎语,帮助企业更好运用企业微信;同时提升了社群运营工作标准化,提升运营效率,帮助企业实现客户增长,玩转私域流量。 -

零代码 + AI 双轮驱动|即速应用解锁人工智能小程序开发新范式
无需代码、无需 AI 算法功底,普通人也能快速搭建智能小程序。即速应用将人工智能与零代码开发深度融合,推出 AI 智能生成能力,用户通过自然语言描述需求,AI 自动生成小程序页面、功能模块与后台配置,覆盖商城、预约、同城、社区团购等全场景。平台内置 AI 智能推荐、智能客服、用户画像分析等能力,一键对接微信生态,打通视频号、企业微信、短信跳转,帮企业快速落地 AI 应用,抢占智慧经营先机,让每家企业都拥有 AI 驱动的智慧店铺。












