查看: 2829|回复: 0

[HTML代码] 小程序第二天

发表于 2018-1-27 10:35:03

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

事件触发的函数 写在 js里面和data是同级; 事件函数里面e是事件参数 里面有坐标触发的目标 ;
e.detail 坐标
参数只能 写 自定义属性 data-xxx:

参数怎么获取:
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这个属性就可以跳转 没有就不行



2.九宫格
跳转到list页面

触发的函数在
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



回复

使用道具 举报