小程序组件通信

组件之间通讯

	1.首先创建一个components文件夹在这下面建子组件mylogin**
    2.在父组件的json文件里定义组件名
    {
      "usingComponents": {
        "v-com":"/components/mylogin/login"
      }
    }
    3.显示
    <v-com />
	父传子：
    	
		1.于vue差不多，在引入的子组件标签上自定义属性（传递），在子组件中
        <v-com msg="20" />
		2.子组件里通过properties来接受
		例如：
			properties: {
              msg:{
                value:10,
                type:Number
              }
            },
         3.展示wxml里
         <view>我是父组件传过来的{{msg}}</view>

	子传父：
    	1.通过点击事件传递在wxml里
        <button bindtap="gofa">子传父</button>
		2.子组件里的methods里通过triggerEvent派发事件并传值
		methods: {
          gofa(){
            this.triggerEvent("myevent",12)
          }
        }
		父组件接受
		
		<v-com msg="20" bind:myevent="handle"/>

		js文件里写方法
		handle(e){
    			console.log(el)
    			this.setData({
      				logData:e.detail
    			})
  		}
		
		页面渲染接受的数据
		<text>{{logData}}</text>


	slot插槽：：：
		
		1.想把组件标签里的内容显示到其他组件内就用<slot></slot>

		比如：在父组件里
		<dialog title="{{title}}" bindsend="getsend">
      			<view slot="before">插槽值12</view>
      			<view slot="after">插槽值123</view>
  		</dialog>

		在子组件里
		<slot name="before"></slot>
		<slot name="after"></slot>

		注意：在dialog组件的component里面配置

			options:{
    				multipleSlots:true
  			}

组件穿透样式

	options:{
    		styleIsolation:'apply-shared' //是否开启公共样式穿透
  	},
  	externalClasses:['my-bg'],//指定使用外部样式类

数据请求

语法：wx.request({

	url:"接口地址",     *必须是https的协议
	methods:"get",
	data:{
		这里是请求数据
	},
	header:{
		'content-type' : 'application/text'
	},
	success(res){
		console.log(res)
	},
	fail(err){
		console.log(err)
	},
	complate(){
		console.log(“无论成功或失败我都执行”)
	}
)}
***注意：1. 在小程序工具的详情里 ，不校验合法域名的勾选上
	2.  或者在小程序后台开发-->设置添加request域名

***注意：网络请求会有延迟，通常请求过程中加入loading
	显示：wx.showLoading()
	隐藏：wx.hideLoading()

可以在本地服务器环境来访问json
	下载npm install http-server -g
	运行时 hs -p 端口号 -o
	例如：hs -p 8888 -o
	p:时指定端口
	o：时自动打开浏览器
mock模拟数据
	文档地址：https://github.com/webx32/WxMock

第一步：复制mock.js和wxmock.js文件到utils目录下
第二步：在app.js引入wxmock代码
	var Mock = require("./utils/wxmock.js")
第三步：Mock.mock("模拟地址",{
	"code":200,
    		"data|1-20":[
        {
            "name":function() {
              return Mock.Random.cname()
            },
            "lastLogin":function() {
              return Mock.Random.datetime()
            }
        }
    ]
})

封装api接口

新建文件夹http
1.在http下新建env.js文件
    //设置公共url
    //commonJS规范
    module.exports={
      //开发环境
      dev:{
        baseUrl:"http://localhost:3000"
      },
      //测试环境
      test:{
        baseUrl:"http://www.test.com"
      },
      //线上环境
      prod:{
        baseUrl:"https://api.it120.cc"
      }
    }
2.在http下新建request.js文件
    //引入env中的url
    const { baseUrl }=require('./env.js').prod
    const subDomain = 'mym'
    module.exports={
      //二次封装wx.request
     /*
     *url（string）路径
     *method(string)请求方式
     *data(object)传递参数
     *isSubDomain(Boolean)次域名 ,true和false
     */
      request:(url,method,data,isSubDomain)=>{
        let _url=`${baseUrl}/${isSubDomain ? subDomain:''}${url}`
        return new Promise((resolve,reject)=>{
          wx.showLoading({
            title:"加载中"
          })
          wx.request({
            url: _url,
            data:data,
            method:method,
            header:{
              'content-type':'application/x-www-form-urlencoded'  //公司的提交参数地址
            },
            success:(res)=>{
              let {code}=res.data;
              if(code===0){
                resolve(res.data)
                wx.hideLoading()
              }else{
                wx.showToast({
                  title: '有误',
                })
              }
              
            },
            fail:(err)=>{
              reject('数据请求有误',err)
            }
          })
        })
      },
    
    }
3.在http下新建api.js文件
    //引入request.js文件
    const {request}=require("./request.js")
    //基于业务封装的数据请求
    module.exports={
      //封装商品列表
      getGoodsList:()=>{
        console.log("获取商品列表数据")
        return request('/shop/goods/list','post',{},true)
      },
      //商品收藏
      addGoodsFav:(goodsId,token)=>{
        return request('/shop/goods/fav/add','post',{goodsId:goodsId,token:token},true)
      },
    
    }
4.使用封装的接口  在pages下的js文件里
    const {getGoodsList,addGoodsFav}=require("../../http/api.js")
    Page({
      data: {
        goodsList:[]
      },
      //测试接口方法getApi
      getApi(){
        getGoodsList().then(response=>{
          console.log(response)
          this.setData({
            goodsList:response.data
          })
        })
          let goodsId="417361";  //应该传值过来，我这里写死的
          let token="3ce42d92-492b-4e2b-acf4-ba4fa8907bd2" //应该传值过来，我这里写死的
          addGoodsFav(goodsId,token)
      }
    )}
5.wxml页面上渲染数据
    <view wx:for="{{goodsList}}" wx:key="index">
        {{item.characteristic}}
    </view>