小程序第二天

Posted 2020-10-21

1.在页面 xx.wxml里面绑定事件；
bindtap 单击事件（会冒泡）
不想要冒泡 catchtap
bindtouchstart
bindxxx， bind开头的会冒泡；catchxxx ，catch开头的不会冒泡；
bind事件绑定不会阻止冒泡事件向上冒泡，catch事件绑定可以阻止冒泡事件向上冒泡。

2. 事件触发的函数 写在 js里面和data是同级；
3. 事件函数里面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 文本框绑定的值一改变就全改变 只需要写好即可 框架会自动给你触发；

2. 单向数据绑定
   没有v-model这种功能了 数据改变 需要你自己写代码去做；

怎么改变数据？this.setData()
this.setData({username:“另一个值”})
bindinput 文本框值改变就会触发这个事件

移动端：

1. 百分比；
2. rem 现在比较流行的；
3. rpx 微信小程序特有的，微信已经给你计算好了比例 你直接用；
   750rpx 百分百；
   375rpx 一半屏幕；
   （也可以用百分比）；

小程序怎么发送一个类似ajax请求，没有跨域概念
wx.request({
url:"...",
data: ,
success:function(res){
}
})
如果真实开发 需要在 小程序账号里面配置你要请求的地址；

申请域名服务器
1，阿里云买域名 www.abc.com

2. 买服务器 配置域名和服务器的对应关系
3. 服务器域名需要备案 （现在一般需要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 这个标签

1. 轮播图
   是否可以点击跳转 如果有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传过来的参数
}

2. 发送请求拿到当前分类的数据
3. 显示当前分类的商品
   设置头部中间的名字
4. 在json里面配置 但是这种是写死
5. 使用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 发送请求拿到图片 拿到对应的评论

2. 点击图片
   调用微信提供的方法
   wx.previewImage()

做的效果 和 手机自带的功能有关系 那么一般小程序都自己封装了

vue接口
http://vue.studyit.io/api/getlunbo