微信小程序进阶

小程序与后台数据交互

  wx.request({
     url:"",   //接口地址
     method："get|post", //请求方式
     data:{id:1001}，  //向后台传递的参数
     header: {  //设置请求头
        'content-type': 'application/json' // 默认值
     },
     success:function(res) {},   //成功返回的数据
     fail:function() {} //失败返回的数据
      

 });

步骤“

  1.小程序与后台交互是通过wx.request()交互的
  2.需要在小程序后台面板设置：设置-》开发设置-》服务器域名-》request合法域名设置
           注：请求后台格式为：https://
  3.如果打开页面获取后台数据，需要在onload中使用wx.request()


  例如：onLoad: function (options) {
 let _this=this;
  wx.request({  
    url:'https://zhige666.gitee.io/xcx/api/goods.json', 
    method:'get',
    success:function(res) {
        console.log("返回的结果：",res);

       if(res.statusCode===200 && res.data.code===200) {

           _this.setData({
            list:res.data.content
           });
            


       }


    }
  })

},

注意：小程序不允许用wx.request()请求本地的json文件，必须放在线上

微信小程序常用标签

  view:相当于div
  text:相当于span
  button: 按钮
  image:图片标签 相当于img
  ......

显示/隐藏

  通过两种方式显示隐藏
  1. wx:if   相当于vue的v-if
  2. hidden  相当于vue的  v-show反义

引入文件

1.引入公共样式文件
@import "wxss文件路径"

2.引入公共的模板文件(即wxml)

样式处理

两种方式：
   1.style  <view  style="color:{{ index===currentIndex ? '#00f':'' }}">
   2.class   <view class="{{ index===currentIndex ? 'active':''  }}"></view>

数据改变并同步到视图（页面）上

this.setData({});

 例如：
    this.setData({
            currentIndex:index
    });


    click: function (e) {    
        var id = e.target.id//根据点击不同的view获取对应的id值
        var str = "isChecked[" + id + "]"//重点在这里，组合出一个字符串
        this.setData({
           [str] : false//用中括号把str括起来即可
        })
    }