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()
做的效果 和 手机自带的功能有关系 那么一般小程序都自己封装了