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 = ; 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">

 8、使用小程序拨打电话

<button type="default" bindtap="calling">拨打电话</button>
Page({
calling:function(){
wx.makePhoneCall({
phoneNumber: '', //此号码并非真实电话号码,仅用于测试
success:function(){
console.log("拨打电话成功!")
},
fail:function(){
console.log("拨打电话失败!")
}
})
}
})

 9、小程序图片给定宽度,让高度自使用

样式设置宽度例如:100%,

.img{

  width: %;

}

添加属性 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 则不会向上穿透

微信小程序开发常用方法的更多相关文章

  1. 微信小程序开发心得

    微信小程序也已出来有一段时间了,最近写了几款微信小程序项目,今天来说说感受. 首先开发一款微信小程序,最主要的就是针对于公司来运营的,因为,在申请appid(微信小程序ID号)时候,需要填写相关的公司 ...

  2. 【微信小程序开发•系列文章六】生命周期和路由

    这篇文章理论的知识比较多一些,都是个人观点,描述有失妥当的地方希望读者指出. [微信小程序开发•系列文章一]入门 [微信小程序开发•系列文章二]视图层 [微信小程序开发•系列文章三]数据层 [微信小程 ...

  3. 微信小程序开发日记——高仿知乎日报(下)

    本人对知乎日报是情有独钟,看我的博客和github就知道了,写了几个不同技术类型的知乎日报APP 要做微信小程序首先要对html,css,js有一定的基础,还有对微信小程序的API也要非常熟悉 我将该 ...

  4. 微信小程序开发日记——高仿知乎日报(中)

    本人对知乎日报是情有独钟,看我的博客和github就知道了,写了几个不同技术类型的知乎日报APP要做微信小程序首先要对html,css,js有一定的基础,还有对微信小程序的API也要非常熟悉 我将该教 ...

  5. 微信小程序开发日记——高仿知乎日报(上)

    本人对知乎日报是情有独钟,看我的博客和github就知道了,写了几个不同技术类型的知乎日报APP 要做微信小程序首先要对html,css,js有一定的基础,还有对微信小程序的API也要非常熟悉 我将该 ...

  6. 微信小程序开发工具测评

    1月9日微信小程序正式上线.很多企业都希望能在这个.但是在技术开发的问题上,却不知道该如何下手.经过一些程序员不辞辛苦连夜测试,终于从十余款工具呕心沥血筛选出四款比较靠谱实用的微信小程序开发工具.接下 ...

  7. 微信小程序开发工具的数据,配置,日志等目录在哪儿? 怎么找?

    原文地址:http://www.wxapp-union.com/portal.php?mod=view&aid=359 本文由本站halfyawn原创:感谢原创者:如有疑问,请在评论内回复   ...

  8. 微信小程序开发工具使用与设计规范(二)

    [未经作者本人同意,请勿以任何形式转载] 上一篇文章主要分析了微信小程序应用场景和优劣势.本篇你可以学习到: 如何使用小程序开发工具写一个Hello World 微信小程序设计规范 微信小程序项目结构 ...

  9. 微信小程序开发视频教程新鲜出炉

    微信小程序开发公测了,可是对于新手来说,不同的框架不同的开发机制,如何快速适应呢?微信小程序开发视频教程新鲜出炉了,从零开始一步一步搭建微信小程序,每个章节都会涉及到不同的知识点,等教程学习完你不但掌 ...

随机推荐

  1. Eleastisearch6.0.0 read_only_allow_delete: false

    Eleastisearch6.0.0由单节点升级到多节点集群cluster时候出现的分片同步错误问题解决 原创 2018年01月18日 16:33:21 5 启动多个节点的ES后,ES开始推举mast ...

  2. tabBar颜色改动

    //未点击的颜色 [[UITabBarItem appearance] setTitleTextAttributes:[NSDictionary dictionaryWithObjectsAndKey ...

  3. [Cocos2d-x v3.x]Mac OX 创建新的Cocos2d-x 3.0 项目

    文章内容来自于: http://cocos2d-x.org/wiki/How_to_Start_A_New_Cocos2D-X_Game Mac OS X 10.9 Software Requirem ...

  4. DOS命令将黑框中查询到的信息保存到TXT等文件里

  5. ASP原码加密工具介绍

    ASP原码加密工具介绍 总是会有非常多方法暴露ASP的原程序.造成数据库的password 路径都能够轻易被其它人搞到,所以对ASP程序实行加密处理是个不错的解决方法.以下来介绍一个工具假设大家感兴趣 ...

  6. [C++设计模式] composite 组合模式

    组合(Composite)模式的其他翻译名称也非常多,比方合成模式.树模式等等.在<设计模式>一书中给出的定义是:将对象以树形结构组织起来,以达成"部分-总体"的层次结 ...

  7. 动态规划---状压dp

    状压dp,就是把动态规划之中的一个个状态用二进制表示,主要运用位运算. 这里有一道例题:蓝书P639猛兽军团1 [SCOI2005]互不侵犯 题目: 题目描述 在N×N的棋盘里面放K个国王,使他们互不 ...

  8. hihoCoder 1187

    今天BC爆0了....但是日子还是要过的....要回学校毕业了~~大学就这么“荒废”了. 这个是hihoCoder的1187,比较基础的一道题. 题目链接: http://hihocoder.com/ ...

  9. springboot 的一般配置

    import javax.servlet.Filter; import org.springframework.boot.SpringApplication; import org.springfra ...

  10. 关于如何将_variant_t型转化为int型和string类型

    1)将_variant_t型转化为int型 关于将_variant_t型转化为int型,网上有好多好多参考,但好多都很复杂并且还不对,其实整个转化过程就只一行代码可以搞定: _variant_t a; ...