微信小程序基本知识
逻辑实现
1 使用动态数据展示列表(可以考虑使用wx:for属性配合动态数组渲染全部列表项,以减少WXML页面的代码量)
eg:
<view class='listGroup' wx:for='{{list}}' wx:for-item='group' wx:key='group{{index}}'>
<view class='listItem' wx:for='{{group}}' wx:for-item='row' wx:key='row{{index}}'>
<image class='icon' src='{{row.icon}}'></image>
<text>{{row.text}}</text>
<image src='/images/arrow.png'></image>
</view>
</view>
事件
1 bindinput 点击按钮时文本框失去焦点并触发自定义事件
<input bindinput='getNumber' type='number' placeholder='请输入 0~100的数字'></input>
bindtap 点击按钮时触发自定义的函数
<input bindtap='getNumber' type='number' placeholder='请输入 0~100的数字'></input>
3 bindChange 监听选项变化
<picker mode='region' bindChange=‘regionChange’>
<view>{{region}}</view>
</picker>
条件渲染
1 wx:if/wx:else
wx:if属性配合<block></block>代码块形成两种情况进行条件渲染。
eg: <block wx:if='{{isGameStart}}'>
<button type='primary'>提交</button>
</block>
<block wx:else>
<button type='primary'>重新开始</button>
</block>
页面间跳转
1 跳转到某一个页面: wx.navigateTo
eg: goGame(){
wx:navigateTo({
url:'../game/game'
})
}
返回首页: wx.navigateBack()
eg: wx.navigateBack()
交互
wx:request
eg: wx:request({
url:'https://xxxxxxxxxxxxxx',
data:{
location:this.data.region[1],
key:'xxxxxxxxx'
},
success:function(res){
this.setData({now:res.data.xxx})
}
})
常用API
建立本地存储：wx.setStorageSync
eg: wx.setStorageSync('myCard',e.detail.value);
2 获取本地存储：wx.getStorageSync
eg: wx.getStorageSync('myCard');
删除本地存储： wx.removeStorageSync
eg: wx.removeStorageSync('myCard');
查看位置：wx.openLocation({})
eg: wx.openLocation({
latitude:that.data.lat,
longitude:that.data.lon,
})
获取地理位置 wx.getLocation({}),,腾讯更新了小程序的许可权限,还需要在app.json文件中追加premission配置才能获取用户地理位置信息，如下：
eg: wx.getLocation({
altitude: true,
success:function(res){
that.setData({
lat: res.latitude.toFixed(2),
lon: res.longitude.toFixed(2),
alt: res.altitude.toFixed(2),
})
}
})
最新文章
- C#文件目录操作完全手册
- Android笔记：HTTP相关
- C++学习基础六——复制构造函数和赋值操作符
- Android笔记：C memory copy
- 查看Linux磁盘空间大小
- ubuntu 安装 JVM 与 ElasticSearch
- thinkcmf thinkphp隐藏后台地址
- MyEclipse安装Eclipse Memory Analyzer插件，并进行错误文件分析流程
- android——屏幕适配大全（转载）
- final用法
- TCP/IP，Web世界的基本规则
- python模块之sys与os
- [LeetCode] 94. Binary Tree Inorder Traversal(二叉树的中序遍历) ☆☆☆
- 各种编译不通过xcode
- 查询mysql事务隔离级别
- 2013-8-6 ubuntu基本操作
- 【Android】Android软件开发之ListView 详解
- unity优化测试插件推荐：内存分析，数据监控，弱网模拟
- python 处理抓取网页乱码
- [Java]一步一步学 Web