【郑州校区】微信小程序第二天

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. 显示当前分类的商品

设置头部中间的名字

1. 在json里面配置  但是这种是写死

2. 使用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

微信小程序第一天

传智播客·黑马程序员郑州校区地址

河南省郑州市 高新区长椿路11号大学科技园（西区）东门8号楼三层

联系电话 0371-56061160/61/62

来校路线  地铁一号线梧桐街站A口出