微信小程序开发常用方法
1、函数中访问data中的数据
_this.setData({ // 日历数据 signList: dataList, // 当前日期 todayDay: str })
2、if判断
wx:if="{{item.id && item.lessNum != 0}}"
3、for循环
<block wx:for="{{listRepar}}" wx:key="unique" wx:for-index="i" wx:for-item="item">
<view class='tabBox active'
bindtap="chooseItem"
> <view class='nameWei'><image class='nameWeiPic' src="../../images/pp.png" />{{item.repair_type}}</view>
<view class='nameWord'>{{item.repair_type}}</view>
</view>
</block>
4、小程序实现登录界面
html页面
<form bindsubmit="formSubmit"> <text class="login_title">登录</text> <input class="ipt_login" name="userName" value="{{userName}}"/> <input class="ipt_login" name="userPassword" type="password" value="{{userPassword}}"/> <button class="btn_login" form-type="submit">登录</button> </form>
js页面
//logs.js= Page({ data: { logs: [], userName: '请输入登录名', userPassword: '' }, // 登录 formSubmit: function (e) { console.log(e.detail.value); //获得表单数据 var objData = e.detail.value; if (objData.userName && objData.userPassword) { // 同步方式存储表单数据 wx.setStorage({ key: 'userName', data: objData.userName }); wx.setStorage({ key: 'userPassword', data: objData.userPassword }); //跳转到成功页面 wx.navigateTo({ url: '../lineOrder/index' }) } }, //加载完后,处理事件 // 如果有本地数据,则直接显示 onLoad: function (options) { var that = this; //获取本地数据 wx.getStorage({ key: 'userName', success: function (res) { console.log(res.data); that.setData({ userName: res.data }); } }); wx.getStorage({ key: 'userPassword', success: function (res) { console.log(res.data); that.setData({ userPassword: res.data }); } }); } })
获取本地存储
var session_id = wx.getStorageSync('PHPSESSID');// 获取一步存储
小程序的本地存储是无时间限制的,就是说永远
5、自定义属性
<view class='showList ' bindtop='shopPost' data-shopId='item.goods_id' ></view>
页面中自定义属性必须通过:data- 的形式书写
js取值
shopPost:function(event){ var postId = event.currentTarget.dataset.shopid }
最后的 shopid 就是 html 中的 data后边的,并且在这里不区分大小写,必须用小写
小程序模仿jq的 toggleClass,多个选项,点击哪个哪个高亮显示,再次点击去掉高亮显示。
<block wx:for="{{listRepar}}" wx:key="unique" wx:for-index="i" wx:for-item="item"> <view class="tabBox {{item.checked != true ? ' ' : 'active'}}" bindtap="chooseItem" data-repId="{{item.repair_type_id}}"> <view class='nameWei'><image class='nameWeiPic' src="{{item.repair_photo}}"></image>{{item.repair_type}}</view> <view class='nameWord'>{{item.repair_info}}</view> </view> </block>
js。高亮是用 class active 控制,点击的时候获取自定义属性 id,用这个 id 和原有的数据list对比找到那个id的数据,改变他的 checked 的属性。小程序没有 addclass这些方法,所以判断高亮的时候,给每一个数据item 都加一个 checked的属性,true 就代表高亮。
改变数据的 item 之后一定要在赋值回去,吧原先的数据改变掉。
chooseItem: function (e) { var dId = e.currentTarget.dataset.repid, listReparDta = this.data.listRepar, _this = this; for (var i = 0; i < listReparDta.length; i++){ if (listReparDta[i].repair_type_id == dId){ listReparDta[i].checked = !listReparDta[i].checked; } _this.setData({ listRepar: listReparDta }); } },
6、页面的跳转
7、动态控制 class
<li class="{{item.date != '' ? ' ' : 'empty'}}" data-dateId='{{item.date}}' bindtap="chooseDay">
<button type="default" bindtap="calling">拨打电话</button>
Page({ calling:function(){ wx.makePhoneCall({ phoneNumber: '12345678900', //此号码并非真实电话号码,仅用于测试 success:function(){ console.log("拨打电话成功!") }, fail:function(){ console.log("拨打电话失败!") } }) } })
9、小程序图片给定宽度,让高度自使用
样式设置宽度例如:100%,
.img{ width: 100%; }
添加属性 mode="widthFix",
<image class="img" src="../../images/hello.png" mode="widthFix">
10、小程序底部按钮点击切换配置
底部的按钮点击切换在小程序里面是通过配置得来的。
在 app.json 文件中配置相关选项
{ "pages":[ "pages/index/index", "pages/priceType/index", "pages/logs/logs", "pages/lineOrder/index", "pages/chooseTap/index", "pages/main/index" ], "window":{
navigationBarBackgroundColor 导航栏背景颜色,如”#000000”
navigationBarTextStyle 导航栏标题颜色,仅支持 black/white
navigationBarTitleText 导航栏标题文字内容
backgroundColor 窗口的背景色
backgroundTextStyle 下拉背景字体、loading 图的样式,仅支持 dark/light
enablePullDownRefresh 是否开启下拉刷新,详见页面相关事件处理函数
}, "tabBar": { "color": "#6e6d6b", "selectedColor": "#f9f027", "borderStyle": "white", "backgroundColor": "#292929", "list": [ { "pagePath": "pages/index/index", // "iconPath": "images/footer-icon-01.png", // "selectedIconPath": "images/footer-icon-01-active.png", "text": "首页" }, { "pagePath": "pages/main/index", // "iconPath": "images/footer-icon-02.png", // "selectedIconPath": "images/footer-icon-02-active.png", "text": "我的" } ] }, "debug": true }
10、小程序点击穿透事件
<!-- 综合筛选 --> <view class='choose_dailog' wx:if='{{isShowDailog}}' bindtap='showDailog' catchtouchmove="stopMove"> <view class='dailog_wrap'> <view> <view class="dailogC_titile">性别</view> <view class="overflowStyle"> <view class="{{item.checked == true ? 'active': ' '}} choose_itemDailog" wx:for="{{sexDate}}" wx:key="index" catchtap="chooseSex" data-repId="{{item.id}}" > {{item.text}} </view> </view> </view> <view class="dailog_footer"> <view class="dailog_footer_item one">重置</view> <view class="dailog_footer_item two">完成</view> </view> </view> </view>
bind 换为 catch 则不会向上穿透
浩楠哥