小程序基础学习 整理 1

主体结构 --- (共用配置，优先级别最低)

app.js
app.json
app.wxss

页面结构

index.wxml
index.wxss
index.js
index.json

测试时候安全域名，除了可以在开发者后台配置域名信息外，还可以在调试工具中，勾选取消安全验证

image标签 不支持 外部链接，只接受 授权安全域名下的 SRC 引入，另外域名需要拼接完全（相对地址的使用慎重一些）
在CSS中使用图片，只能使用BASE64格式

小程序结构中，app.json配置

全局配置 
                    {
                        Page({

                        }),
                        
                        //配置
                        window({
                            页面颜色等
                            下拉刷新
                        }),

                        //分页按钮
                        tabBar({
                            'color':'xxx',
                            'selectedColor':'xxx',
                            'lists':[   //最少2个，最多5个,与上面page中顺序需要匹配
                                {
                                    'text':'xx',
                                    'pagePath':'xxxx',
                                    'iconPath':'',        //icon 大小限制为40kb，建议尺寸为 81px * 81px，不支持网络图片
                                    'selectedIconPath':'' //icon 大小限制为40kb，建议尺寸为 81px * 81px，不支持网络图片
                                },{
                                    'text':'xx',
                                    'pagePath':'xxxx',
                                    'iconPath':'',        //icon 大小限制为40kb，建议尺寸为 81px * 81px，不支持网络图片
                                    'selectedIconPath':'' //icon 大小限制为40kb，建议尺寸为 81px * 81px，不支持网络图片
                                },
                            ]
                        }),

                        debug({

                        })
                     }
            页面配置
                  在每个页面js文件中，   

小程序 js初始化 app.js

1.注册app 
                App({
                    //全局变量
                    gldData : {
                        a : 1
                    }
                })

                在page中js调用
                //通过getApp获取全局函数实例
                const app = getApp();
                console.log(app.gldData) //取到全局变量 

                pageData : { //页面中的全局数据
                    b : 2
                }

生命周期

        app
             onLaunch
             onShow
             onHide
        page
             onLoad //只会执行1次
             onReady //只会执行1次
             onShow
             onHide
             onUnload //只会执行1次

数据绑定，内容 遍历，提交渲染

事件

  bind:tap="xxx"  bind会引起事件冒泡
  catch:tap='xxx'  catch不会引起事件冒泡

布局:

尺寸：一个屏幕的宽度为750rpx 把PSD设置图PX尺寸按照屏幕比例,将所有样式中的尺寸转化为rpx
在CSS中引入共用样式 在目标page的CSS中 @import 'xxx/xxx/xxx.wxss';

wxs

wxs --- wx script

//模块化引入 
   <wxs module='tools'>
        function createName(data){
            return data.split('');
        }

        module.exports = createName;
   </wxs>

   <view wx:for="tools(names)">
     {{item}}
   </view>
   
   names为js中data中的用户自定义的数据

data数据更新

修改data数据中已有的数据，且必须通过方法 setData方法来实现

  setData会将所有数据更新后，再出发页面渲染更新，而不是每个数据变化都渲染页面（主要为了提高性能）
  
  //设置数据

  this.setData({
     xxx : xxxx
  })

  //获取数据 (es6 数据解构)
 
  let { xxx }  = this.data;    // xxx为data中已有的key值
  let xxx = this.data.xxx  // 相当于

  自定义组件

    引入组件 (组件页面，引入组件的页面  或者说  子级与父级的关系更恰当些)

    usingComponent

    组件页面

        json文件 { 'component':true }

        js文件

        Component({
            data : {

            },
            attached : {

            },
            method{

            }
        })

    引入组件的页面
    
        json文件 { 'usingComponents':{
            'mycomponent' ：对应路径
        }}  


    //组件js中，初始化立即会执行该函数，强制同步数据使用
    attached(){
        this.triggerEvent('myfn',123);  
    }

    【组件数据返回到引入的页面中去】 method中 this.triggerEvent('myfn',123);  触发自动定义事件myfn 带上数据123 过去

    <mycomponent now-in="哈哈哈" bind:myfn='myPageGetData'></mycomponent>  页面中的标签

    myPageGetData(ev){      页面的js
        console.log(ev);
        this.setData({
            xxx : ev.detail;    xxx为页面js中data中的数据的key值
        })
    }

    【引入页面中模板标签添加数据，到组件页面中】

    在组件标签上添加自定义属性 now-in,

    在自定义组件的js文件中，对属性properties的数据进行设置

    properties:{  
        nowIn : String   //标签中为小写的串式命名，在属性中为驼峰式命名
    }
    
    在组件ml页面中，可以直接使用 {{nowIn}}