开发安心食疗小程序

冒泡事件之bindchange事件

这是swiper中的事件，当左右滑动的时候，滑动结束会出发这个事件

我们也需要知道：

1. bindfocus: 指当我们的输入框获得焦点时触发，也就是鼠标或者手指点击到输入框时。 bindblur: 指输入框失去焦点是触发，也就是当我们敲击回车或手机上的完成又或者是点击屏幕上的空白处时触发。 

2. bindchange: 这个事件官方文档中没有写，它的效果和bindblur一样，至于看名字我们可能觉得bindchange在输入框中的内容不改变时不会触发，但是亲测即使内容不改变，bindchange事件也一样会触发。 

3. bindinput: 没输入一个字符都会进行一次检索，通常用于实时检索。但是这种方法对数据库的要求较高。

4. 在bindblur或bindchange事件中我们通过event.detail.value获得swiper中的事件，左右滑动的时候，滑动结束会出发这个事件。

小程序网络请求合法域名配置

官网相关配置
跳转链接

我们想获取域名发来的信息

  onLoad: function (options) {
   
    wx.request({
   
      url: 'http://iwenwiki.com:3002/api/banner',
      // method:'get'
      success:function(res){
   
        console.log(res);
      }
    })
  },

先需要在微信公众平台获取添加上https://iwenwiki.com这个网址

在将微信开发者工具的本地设置的“不校验合法域名”一项勾选

这样，就可以获取到域名内的信息

加载数据时，显示“正在加载”和“加载完毕”

我们在生命周期函数–监听页面加载处，也就是onLoad处添加代码

 onLoad: function (options) {
   
  wx.showLoading({
   
    title: '数据正在加载中，请稍等',
  })
  }

我们是在信息被加载出来以后，显示信息加载成功，所以，加载完毕的方法调用需要在success内添加

    // 2.进入页面获取下面的推荐信息--列表信息
  wx.request({
   
    url: 'http://iwenwiki.com:3002/api/indexlist',
    success:res=>{
   
      wx.hideLoading();
      wx.showToast({
   
        title: '数据加载完毕', 
        duration:1000
        
      })
      if(res.data.status==200){
   
          console.log(res.data.data);
          that.setData({
   
            list: res.data.data
          })
      }
    } 
  })

关键代码

 wx.hideLoading();
  wx.showToast({
    title: '数据加载完毕', 
    //显示时间
   duration:1000 
  })

小程序页面之间传递参数

  小程序页面跳转传递参数（数据）
  第一种方法:url传值
  
    1.navigator组件 url地址栏传递数据 url='xxx?参数变量=参数值&...'
      对应的跳转的页面 在js文件里面的onload函数options接受


    2.事件跳转 传递参数 
      bindtap='indexDetail' 点击的是哪个元素 事件传参data-属性='属性值'
      事件wx.api跳转 
      对应的跳转的页面 在js文件里面的onload函数options接受
      

第一种：
跳转到indexDetail页面并传递一个参数itemId，值为123

<!-- 首页信息列表 -->
<view class="list"> 
  <view class='item' wx:for='{
   {list}}' wx:key='index' bindtap='tiao'>
    <!-- 跳转到indexDetail页面并传递参数itemId，值为123 -->
    <navigator url="../indexDetail/indexDetail?itemId=123">
      <view class='title'>{
   {
   item.title}}</view>
      <view class='item-wrapper'>
        <view class='img'>
          <image src='{
   {item.image}}'></image>
        </view>
        <view class='info'>
          {
   {
   item.desc}}
        </view>
      </view>
    <view class='ready-num'>
      <text>{
   {
   item.readNum}}</text>次阅读</view>
    </navigator>
  </view>
</view>

点击view，跳转到indexDetail页面，并获取传递来的值

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {
   
    // onLoad函数的参数 options接收其他页面跳转进入这个页面 传递的url参数
    console.log('url传递的参数',options);
  },

第二种：
事件跳转 传递参数

<!-- 首页信息列表 -->
<view class="list"> 
  <view class='item' bindtap='indexDetail' data-id="{
   {item.id}}" wx:for='{
   {list}}' wx:key='index'>
    <!-- 跳转到indexDetail页面并传递参数itemId，值为123 --> 
      <view class='title'>{
   {
   item.title}}</view>
      <view class='item-wrapper'>
        <view class='img'>
          <image src='{
   {item.image}}'></image>
        </view>
        <view class='info'>
          {
   {
   item.desc}}
        </view>
      </view>
    <view class='ready-num'>
      <text>{
   {
   item.readNum}}</text>次阅读</view> 
  </view>
</view>

index.js

    //2.点击跳转页面----detail页面
    indexDetail:function(e){
   
      //获取当前点击的元素的值，点击的谁标识的它的id
      console.log(e.currentTarget.dataset.id);
      // api -- 使用navigatTo去跳转页面
      wx.navigateTo({
   
        url: '../indexDetail/indexDetail?itemId='+e.currentTarget.dataset.id,
      })
    },

多个显示的选择区域的搭建

我们开始实现上面的效果

一：我们先在utils页面内新建一个js页面，名为productData.js，存放选择区域的布局

  var obj=[{
   id:1},{
   id:3}]
  module.exports=obj

我们先试着在控制台输出上面的数据
在food.js页面内，引入外来模块

var productData=require('../../utils/productData.js');
console.log(productData)

输出成功，我们在这个基础上，搭建选择区域

module.exports = [
  {
   
    id:1,
    imgUrl:"../../images/item1.jpg",
    name:"美容养颜"
  },
  {
   
    id: 2,
    imgUrl: "../../images/item2.jpg",
    name: "保健调养"
  },
  {
   
    id: 3,
    imgUrl: "../../images/item3.jpg",
    name: "补养"
  },
  {
   
    id: 4,
    imgUrl: "../../images/item4.jpg",
    name: "减肥"
  },
  {
   
    id: 5,
    imgUrl: "../../images/item5.jpg",
    name: "母婴"
  },