微信小程序1

page顺序，每次刷新会到入口，所以自定义一个编译模式
不设置宽高，自己会自动给值
字体不用rpx
利用display:flex-----显示一行

 

 <view class='shop-star'> 
   <view class='star-after'>★★★★★</view>  
   <view class='star-before'>★★★★★</view> 
 </view>
.shop-star{  
 position: absolute;  
 top: 20rpx;  
 right: 20rpx;  
 color: #e2e2e2;
}
.star-before{  
  color: #f19e38; 
  position: absolute;  
  top: 0rpx;  left: 0rpx; 
  width: 80%; 
  overflow: hidden;
}

父子标签都给绝对定位，，那么子标签可以按照父标签来定，也就是子绝父相的原理

用前端编译工具执行微信小程序代码

用webstorm打开微信小程序代码  setting 中搜索file Type   
点击要设置的文件例如html   css  
然后在第二个点击＋号添加*.wxss    和*.wxml

sublime里面找到查看-->语法-->点击html或css

查看后台穿过来的数据在AppData中看

生命周期

生命周期函数：app.js    index.js
app.js     把原有的内容删掉--->App--->Teb键
index.js  把原有的内容删掉--->page--->Teb键

 

请求数据

请求数据：（wx.request）
request---Tab

报错：

https://locally.uieee.com 不在以下 request 合法域名列表中，
请参考文档：https://developers.weixin.qq.com/miniprogram/dev/framework/ability/network.html
解决办法：点击详情--->不校验合法域名、web-view（业务域名）、TLS 版本以及 HTTPS 证书

 

 

与vue双向绑定不同点（需要通过this.setData调用）

在微信小程序中我们一般通过以下方式来修改data中的数据
this.setData({
      index1: e.detail.value
    })
比如在函数里面修改数据
bindFaChange1: function (e) {
    this.setData({
      index1: e.detail.value
    })
  }
但是当我们通过wx.request请求网络数据成功后绑定数据时候报以下错误
this.setData is not a function
代码如下：
doCalc:function(){
    wx.request({
      url: url,
      method:'POST',
      header: {
        'content-type': 'application/json' // 默认值
      },
      success: function (res) {
        if (res.data.code == 0){
          this.setData({
            maxCount: res.data.maxCount
          });
        }
      }
    })
  }
这是因为this作用域指向问题 ，success函数实际是一个闭包 ， 无法直接通过this来setData
那么需要怎么修改呢？
我们通过将当前对象赋给一个新的对象
var _this = this;
然后使用_this 来setData就行了
完整代码

另外说一下 ， 在es6中 ， 使用箭头函数是不存在这个问题的
例如 ：
setTimeout( () => {
            console.log(this.type + ' says ' + say)
        }, 1000)
当我们使用箭头函数时，函数体内的this对象，就是定义时所在的对象，而不是使用时所在的对象。
并不是因为箭头函数内部有绑定this的机制，实际原因是箭头函数根本没有自己的this，它的this是继承外面的，因此内部的this就是外层代码块的this。

 

轮播图问题

轮播图好看：媒体组件中mode 13种裁剪
mode=‘aspecttFill’保持等比缩放  
lazy-load               如果图片不出来

生命周期，请求数据

Page({

  /**
   * 页面的初始数据
   */
  data: {
    msg:"数据绑定用{{}}",
    slideList:[],
    navList:[]
  },

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {
    // console.log("监听页面加载")
    // console.log(wx)  -----对象
    // console.log(window)--------undefined
    // 请求数据
    // wx.request({
    //   url: '',  //请求地址---https格式
    //   data: '', //请求的参数
    //   header: {},  //设置请求的header
    //   method: 'GET',   //请求的方式---一定是大写
    //   dataType: 'json', //返回的格式
    //   responseType: 'text', //返回的是文本类型
    //   success: function(res) {},  //成功的回调函数
    //   fail: function (res) { },//失败的回调函数
    //   complete: function (res) { },//接口调用结束的回调函数，调用成功，失败都执行
    // })
    var _this = this;
   wx.request({
     url: 'https://locally.uieee.com/slides',
     data: '',
     header: {},
     method: 'GET',
     dataType: 'json',
     responseType: 'text',
     success: function(res) {
      //  console.log(res);
      // this.slideList = res.data;  数据未渲染上
      // console.log(this.slideList);
      // 1.跟新数据
      // 2.跟新视图
       _this.setData({
        slideList:res.data
      });


     },
     fail: function(res) {},
     complete: function(res) {},
   })

    wx.request({
      url: 'https://locally.uieee.com/categories',
      data: '',
      header: {},
      method: 'GET',
      dataType: 'json',
      responseType: 'text',
      success: function(res) {
        _this.setData({
          navList:res.data
        })
      },
      fail: function(res) {},
      complete: function(res) {},
    })
  },

  /**
   * 生命周期函数--监听页面初次渲染完成
   */
  onReady: function () {
    // console.log("监听页面初次渲染完成")
  },

  /**
   * 生命周期函数--监听页面显示
   */
  onShow: function () {
    // console.log("监听页面显示")
  },

  /**
   * 生命周期函数--监听页面隐藏
   */
  onHide: function () {
    // console.log("监听页面影藏")
  },

  /**
   * 生命周期函数--监听页面卸载
   */
  onUnload: function () {
    // console.log("监听页面卸载")
  },

  /**
   * 页面相关事件处理函数--监听用户下拉动作
   */
  onPullDownRefresh: function () {
    
  },

  /**
   * 页面上拉触底事件的处理函数
   */
  onReachBottom: function () {
    
  },

  /**
   * 用户点击右上角分享
   */
  onShareAppMessage: function () {
    
  }
})

wx:for="{{数组}}" wx:key="id"  默认为索引index    对象item