微信小程序知识点

• 使用navigator组件
• 配置 TabBar
• 事件处理函数
• 微信小程序 page里的js格式
• 小程序 v-if和hidden的区别用法
• 小程序 v-for的编写（不想写了 大概和vue的用法一致）
• 哇swiper真是无所不在
• 页面的生命周期函数
• 组件的自定义数据属性
• 发起请求API
• 解决 403 小程序无法获取的问题
• 动态设置导航栏 loading 状态和标题
• 页面事件处理函数 及页面转发

使用navigator组件

<navigator url="/page/weekly/weekly" open-type="navigate" hover-class='nav-hover'   class='nav-default'>  每日推荐  </navigator>  
//可以跳转的组件链接

//open-type="switchTab"  底部切换   
// open-type="navigate"  点击之后小程序界面没有返回按扭
// hover-class='nav-hover'   class='nav-default'  点击之前和点击之后

配置 TabBar

 1、配置tabBar 对若干一级页面的入口链接
 2、全局配置 app.json
 3、新问题引入：原来about页的<navigator>元素点无效
 
 "tabBar":{
    "selectedColor": "#ED6D00",    //选中的字体
    "list":[
      {
        "text":"商城",
        "pagePath":"pages/logs/logs",
        "iconPath":"imgs/icon/sc1.png",
        "selectedIconPath":"imgs/icon/sc2.png"
      },
      {
        "text": "我的",
        "pagePath": "pages/third/third",
        "iconPath": "imgs/icon/user1.png",
        "selectedIconPath": "imgs/icon/user2.png"
      },
      {
        "text": "商城",
        "pagePath": "pages/index/index",
        "iconPath": "imgs/icon/sc1.png",
        "selectedIconPath": "imgs/icon/sc2.png"
      }
    ]
  },
 

事件处理函数

  bindViewTap: function() {
    wx.navigateTo({
      url: '../logs/logs'
    })
  },
  
  <!--  事件跳转会   
    用navigateTo 如果用 tabBar的情况下就不能用 
    只能用下面的方式  switchTab -->
    
  bind2: function () {
    wx.switchTab({
      url: '../third/third',
    }) 
  },
    

微信小程序 page里的js格式

Page({
    data:{
        list:{
            name:'教父',
            age:'16',
            sex:'女',
            fullin：false
        }
    },
    onLoad: function () {
        this.setData({
          logs: (wx.getStorageSync('logs') || []).map(log => {
            return util.formatTime(new Date(log))
        })
    })
  }
})

小程序 v-if和hidden的区别用法

    对于可见性需要频繁切换的时候，不建议使用v-if条件渲染
    类似于不需要用户来回切换的就可情况下就可用条件渲染
    
    hidden的初始化开销比较大
    
 <text style="color:red;" wx:if="{{list.trueorflase}}">强烈推荐</text>
 <text style="color:red;" hidden="{{!list.trueorflase}}">强烈推荐</text>
 
 Page({
  data: {
    list:{
      trueorflase:true,
    }
  },
 }
 
 

小程序 v-for的编写（不想写了 大概和vue的用法一致）

<view wx:for={{此处是js data里的需要循环数组的list}}>
    <text>{{index+1}} {{item.name}}</text>
</view>

大概就这样直接就渲染了 又要用
index（下标）可以直接写第几周，没有vue麻烦 

哇swiper真是无所不在

1、这边真的要注意起来，swiper必须有宽和高才行，不然里面的东西一定要有
2、如果要让swiper的前一页和后一页都漏出来一点，就要用到
    previous-margin="50rpx"   next-margin="50rpx"
3、细节样式优化
    indicator-dots="{{true}}"   //面板指视
    current="1"   到第几张幻灯片上
    还可以写  current="{{list.length - 1}}"
    
<swiper class="这个盒子也可以设置宽高" indicator-dots="{{true}}" previous-margin="50rpx"   next-margin="50rpx">
    <swiper-item wx:for={{item}}   class="style" current="1">
        <text></text>
    <swiper-item>
</swiper>

页面的生命周期函数

1、swiper默认切换到最后一页 
    current="1"   到第几张幻灯片上  下标从0开始
    还可以写  current="{{list.length - 1}}"
2、非本周幻灯片页添加   返回本周  按扭
3、页面状态数据如何初始化、onload(opation)
     onLoad   //页面初始化操作
     onShow   //当页面每一次被显示的时候都要调用一次
     onReady  //整个界面渲染完成准备交互的时候调用一次
     onHide   //当页面被隐藏的时候被调用一次
     onUnload   //当页面被关闭或被卸载的时候调用一次
     eg.写法  
        onShow:function( ){
            
        }
     
     
    //每个页面都有的一个回调函数
    onLoad:function(opations){
        this.setData({     //this.setData是对内部状态变量进行更新
            currentIndex:this.data.list.length - 1
        })
    }
    

组件的自定义数据属性

需求： 从介绍页跳转到  详情页上
    新增detail页
    wx.navigate To()
    参数化  page path
    组件自定义数据属性：向逻辑层的业务数据传递
    
    wx.navigateTo(OBJECT)  //保留当前页面，并返回到原页面
    wx.redirecTo(OBJECT)   //关闭当前页，跳转到应用内的某个页面
    
    
    组件自定义数据属性   
    (要先用console打印一下)
    xml:
    <swiper-item class="swiper" wx:for="{{list}}" bindtap="f1"
      data-user-name = "baba"
      data-movie-id = "{{item.id}}">
      
    js:
    f1:function(event){
        // console.log(event.currentTarget) 
        var movieId = event.currentTarget.dataset.movieId
        console.log(movieId)
    
        wx.navigateTo({
          url: '/pages/four/four?id=?'+ movieId,
        })
      }
     
      <text bindtap="f0" class="return" wx:if="{{index<(list.length - 1)}}">返回本周</text>
       
       使用catch元素绑定tap   阻止向上冒泡
       当前元素对用户的交互，响应做出处理
      
      //返回本周按钮
      f0:function(even){
        this.setData({
          currentIndex: this.data.list.length - 1
        })
      },
      

发起请求API

wx

/**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {
    console.log(options.id)
    this.setData({
      mid:options.id
    })
    
    wx.request({
      url: 'http://api.yesapi.cn/?s=App.WxminiAdmin_Adver.CreateDataAdver/a/b.jsb',
      以下注释可要 可不要
      <!--method: 'GET',-->
      <!--data: {-->
      <!--  x: 1, y: 2-->
      <!--},-->
      <!--header: {-->

      <!--},-->
      // 以下是三个回调函数
      // 成功调用
      success: function (res) {
        console.log(res)
      },
      <!--// 失败调用-->
      <!--fail: function () {-->

      <!--},-->
      <!--// 无论成功失败都调用-->
      <!--complete: function () {-->

      <!--}-->
    })
  },
  
  
  豆瓣API获取不成功  无法运行

解决 403 小程序无法获取的问题

var that = this

wx.request({
      url: 'http://api.yesapi.cn/?s=App.WxminiAdmin_Adver.CreateDataAdver/a/b.jsb',
      
        api.yesapi.cn   这种的先改成  一个转发代理如：liudongtushuguan.cn
        **会报错  400  需设置  header 取值
        
        header:{
            "content-type":"json"
        },
    
      // 成功调用
      success: function (res) {
        console.log(res)
        
        if(res.statusCode==200){
            that.setData({     //是对内部状态变量进行更新
                movie:res.data
            })
        }
        
         wx.hideNavigationBarLoading()   //
        //这个that-->this, 因为内部没有setData变量所以在 
             page({下面直接定义了一个  var that = this})
      },
      
    })
  },
  
  在这里，在xml 界面文件夹内写上的话，可能会因为id不对显示不出
  ，并显示  400 错误，这就需要改为正确的  id  就行了

动态设置导航栏 loading 状态和标题

 wx.showNavigationBarLoading()   //页面标题左方显示loading 动画
 wx.hideNavigationBarLoading()   //隐藏掉动画
 wx,setNavigationBarTitle()    //动态的设置标题 
 
 写在  success:function({})  标签里写上
 wx.setNavigationBarTitle({
     title:res.data.rating.average + "分" + res.data.title,
 })

页面事件处理函数 及页面转发

onPullDownRefresh   //下拉刷新时被调用
onReachBottom     //下滑触底时被调用
onPageScroll      // 滑动时调用
onShareAppMessage   //页面分享时被调用


/**
    * 用户点击右上角分享
   */
  onShareAppMessage: function () {
    return{
      title:"每周推荐", 
      // title:"向你推荐" + this.data.movie.title
      // 以上这种方法，可直接获取到数据需要  转发的信息
    }
  }

组件化开发

wx todo

功能点：多页面开发
        表单处理
        图片选择存储
        页面数据同步
        本地数据存储
        自定义组件
        
        
    组件 就是对业务逻辑和业务进行封装
    
    <slot><slot>
    

小程序全栈开发

 function(request){
     return response;
 }