1. 在页面 xx.wxml 里面绑定事件;
bindtap 单击事件 (会冒泡)
不想要冒泡 catchtap
bindtouchstart
bindxxx, bind 开头的会冒泡; catchxxx ,catch 开头的不会冒泡;
bind 事件绑定不会阻止冒泡事件向上冒泡, catch 事件绑定可以阻止冒泡事件向上冒泡.
事件触发的函数 写在 js 里面和 data 是同级;
事件函数里面 e 是事件参数 里面有坐标触发的目标 ;
e.detail 坐标
参数只能 写 自定义属性 data-xxx:
<button bindtap="abc" data-id="1" data-name="张三"> 点击 </button>
参数怎么获取:
- e.target.dataset.id
- e.target.dataset.name
1. 双向数据绑定 vue angular
v-model 文本框绑定的值一改变就全改变 只需要写好即可 框架会自动给你触发;
单向数据绑定
没有 v-model 这种功能了 数据改变 需要你自己写代码去做;
怎么改变数据? this.setData()
this.setData({username:"另一个值"})
bindinput 文本框值改变就会触发这个事件
移动端:
百分比;
rem 现在比较流行的;
rpx 微信小程序特有的, 微信已经给你计算好了比例 你直接用;
750rpx 百分百;
375rpx 一半屏幕;
(也可以用百分比);
小程序怎么发送一个类似 ajax 请求, 没有跨域概念
- wx.request({
- url:"...",
- data: ,
- success:function(res){
- }
- })
如果真实开发 需要在 小程序账号里面配置你要请求的地址;
申请域名服务器
1, 阿里云买域名 www.abc.com
买服务器 配置域名和服务器的对应关系
服务器域名需要备案 (现在一般需要 20 天) ××× 合同单
发请求 -- 如果成功之后再发送, 那么会一直在 success 里面嵌套下去
这种一直嵌套的函数 会形成 地狱回调, 新语法 promise 可以解决这个问题.
module.exports 导出东西给别人用
require 导入别人的东西来用
- new Promise((resolve, reject) => {
- wx.request({
- url:
- https://locally.uieee.com/${url}
- ,
- data: data,
- success: resolve,
- fail: reject
- })
- })
new Promise 给一个承诺
resolve 成功会触发这个
reject 失败会触发这个
使用
必须. then 才会去拿到结果
返回的 promise 对象. then(function(){
- // 成功会执行这个函数 就是 resolve
- },
- function(){
- // 失败 就是 reject
- }
- )
promise 资料
http://es6.ruanyifeng.com/#docs/promise
跳转要使用 navigator 这个标签
轮播图
是否可以点击跳转 如果有 link 这个属性就可以跳转 没有就不行
- <navigator wx:if="{{item.link}}" url="{{item.link}}">
- <image src="{{item.image}}" mode="aspectFill"/>
- </navigator>
- <image wx:else src="{{item.image}}" mode="aspectFill"/>
2. 九宫格
跳转到 list 页面
<navigator class="item" url="/pages/list/list?cat={{item.id}}
cat 当前分类
如果点击跳转到了 list 页面
list 页面
1. 获取到你是哪个分类
在 onLoad: function (options) {
- //options 获取到的是 url 传过来的参数
- }
发送请求拿到当前分类的数据
显示当前分类的商品
设置头部中间的名字
在 json 里面配置 但是这种是写死
使用 js 代码来操作
- wx.setNavigationBarTitle({
- title: '美食' })
渲染当前分类的数据
下拉加载 不需要你去判断 你只需要配置好
list.json
"onReachBottomDistance": 20 距离底部 20px 的时候就触发去加载下一页
触发的函数在
- list.js
- onReachBottom: function () {
- // console.log('到底了, 别拉了')
- // 在这里加载下一页的数据
- // 发送请求获取下一页的数据显示追加到页面上
loadMore() 函数是封装的发送 request 请求下一页
下拉刷新 配置
list.json
"enablePullDownRefresh": true, 启用下拉刷新
刷新触发的函数
- list.js
- onPullDownRefresh: function () {
- // 发送请求获取 到第一页的数据 然后更新页面 数据能改成初始状态的都要改
- }
点击某个商品 跳转到详情页
为了知道是哪个商品 我们需要把当前商品的 id 传过去
1. 详情页 获取到商品 id 发送请求拿到图片 拿到对应的评论
点击图片
调用微信提供的方法
wx.previewImage()
做的效果 和 手机自带的功能有关系 那么一般小程序都自己封装了
vue 接口
http://vue.studyit.io/api/getlunbo
来源: http://www.bubuko.com/infodetail-2639775.html