小程序 api的封装

 //es6的js文件的导出导入
    const config = {
        appkey: 'your appkey',
        apiBaseUrl: 'http: /lse.7yue.pro/'
    }

    export {
        config
    }




  // 微信原生api请求接口的方法
    onLoad: function (options) {
        wx.request({
            url: `${config.apiBaseUrl}theme/by/names`,
            // url:'http:/se.7yue.pro/v1/theme/by/names',
            method: 'GET',
            data: {
                names: 't-1'
            },
            headers: {
                appkey: config.appkey
            },
            success: res=> {
                this.setData({
                    topTheme: res.data[0]
                })
            }
        })
    }

    生命周期函数--监听页面加载
    JS类型的约束
    业务逻辑
    数据绑定
    view视图层业务逻辑层桥梁中间层
    MVC
    Controller
    C写业务,Model写业务
    Model、Logic.Service
    Service Manager





如何使用代理模式封装异步回调函数不支持的微信小程序api

    const Promisic=function (func){
        return function (params={}){
            return new Promise((resolve ,reject)=>{
                const args=object.assgin(params,{
                    success:(res)=>{
                      resolve(res);
                    },
                    fail:(error)=>{
                        reject(error);
                }
                });
                func(args);
            })
        }
    }


   // Http的封装
    class Http {
        static async request({
            url,
            data,
            callback,
            method='GET'
                             }){
          1const res=  await promisic(wx.request)({
                url:`${config.apiBaseUrl}${url}`,
                data,
                method,
                header:{
                    appkey:config.appkey
                }
            })
            return  res.data
        }
    }
    // 案例中运用的话
      async onload(){
        this.initAllData()
    }
    async initAllData() {
        const themeA = await Theme.getHomeLocationA()
        const bannerB = await Banner.getHomeLocationB()
        this.setData({
        themeA: themeA [0],
            bannerB
    })
    },
    //通过model 封装 api方法
    class Theme{
        static  getHomeLocationA(callback){
            http.request({
                url:'',
                data:{
                    name:'t-1'
                },
                callback:data=>{
                    callback(data)
                }
            })
        }
    }

    class Banner{
        static locationB='b-1'
        static  getHomeLocationB(){
           return async await http.request({
                url:'',
                })
        }
    }

semver的语法规则
~只会固定版本号 例如 ~1.2.3只会固定 1.2.3这个版本
务必在版本号前面加上～，这会让npm为你安装0.6这个大版本的最新小版本。比如，当前最新版本是O.6.4，那么输入:
^只会固定前二位的版本号 例如^1.2.3 固定只后就是^1.4.2

如何全局引用这个组件 在app.json里面引用
“usingComponents”{
“l-gird":“/miniprogram_npm/lin-ui/grid/index”
}
自定义的组件不需要在自定义组件发生http请求 只需要在页面的上发生请求
同时需要组件在组件的index.js proprties 定义grids []
然后通过{{grid}}绑定grid 的值

如何编写样式
从外向内编写样式
然后先设置每个元素的宽高在然后设置
元素图片字体的宽高
组件的宽高

自定义组件的class类不生效 只能使用外部样式类来解决

组件设计的与Lin UI的设计原则
你必须在组件的灵活性和易用性之间/稳定之间做出一个选择，找到一个平衡点
组件到底意义什么
组件从三个方面:样式、骨架、业务逻辑/行为上对代码进行了封装，
方便开发者在日后重用/复用样式、骨架和业务逻辑。

组件必须要提供给用户的几个特点与方法
组件必须允许用户通过某种方式对组件进行自定义。
不能自定义的组件或者说自定义程度很弱的组件不是一个好的组件设计。
自定义性通常包括
1、对样式的自定义2．对骨架的自定义3.对业务逻辑的自定义

灵活性:
1.外部样式类2. Slot插槽