小程序入门

小程序开发 未完成

文档

基本结构

全局： app.json app.wxss app.js page
page: wxml wxss js json

移动设备的分辨率和 rpx

常见的设计图都是 750px;而不是 375（ip6）呢

pt(逻辑分辨率,简单理解就是屏幕物理尺寸)
px(物理分辨率，像素，同样尺寸像素点越多就越细腻)
reader:@2x 和@3x 实际你看到的效果是差不多的
PPI:勾股定理，根据对角线计算

rpx 的作用

在不同分辨率的设备上进行自适应，小程序提供了新的单位 rpx
在 iPhone6 下视觉稿为 750x1334，
1px = 1rpx = 0.5pt,在其他设备上可能就用其他的单位换算的对应关系

文字有些时候就不适合使用 rpx,可能会出现文字太小看不清

生命周期

page 的生命周期函数和 component 的是不一样的
page 重点关注这几个
onLoad -> onShow -> onReady

组件

小程序已经支持组件和 components 了

//绑定
<component-tag-name bind:myevent="onMyEvent" />;
//触发
this.triggerEvent("myevent", { data }, {});
//调用
 onMyEvent(e) {
    e.detail.data // 自定义组件触发事件时提供的detail对象
  }

父组件还可以通过 this.selectComponent 方法获取子组件实例对象，

组件的生命周期

重点
created attached detached

properties

dataName:{
    type: Number,
    //感觉有点像watch,又有点像计算属性。当数据变化的时候调用
    observer(newVal,oldVal,changedPath){}
}

behavior（组件的共用行为，多继承的思想，类似 mixins）

Behavior({
    properties: {},
    data: {},
    methods: {}
    ...
});

wxs

模块
wxs 是什么

显示用户信息

新版的授权

<button open-type="getPhoneNumber" bindgetphonenumber="getPhoneNumber"></button>

  getPhoneNumber(e) {
    console.log(e.detail.errMsg)
    console.log(e.detail.iv)
    console.log(e.detail.encryptedData)
  }
})

当用户通过 button 授权之后，下一次调用

wx.getUserInfo(
    success(data){
    console.log(data)
}
)

就能够获得用户信息，也就是说不一定能够获得用户信息
那么当用户再一次进入小程序，如何判断是否授权呢？
分俩种情况：未授权和已授权
已经授权 data.authSetting[scope.userInfo] 就是 true

wx.getSetting({
    success(data) {
        if (data.authSetting[scope.userInfo]) {
            wx.getUserInfo({
                success(data) {
                    console.log(data);
                }
            });
        }
    }
});

流程搞清楚了，那么弹窗授权只能通过 button，就很难受，如何用一个图片来代替这个 button 呢

<button
    bind:getuserinfo="onGetUserInfo"
    open-type="{{openType}}"
    plain="{{true}}"
    class="container"
>
    <slot name="img"></slot>
</button>

onGetUserInfo(e){
    this.triggerEvent('getUserInfo',e.detail,{})
}

登录

获取用户授权之后如何登录呢

其他

微信开发工具越来越智能了，新建 page，就会自动的在 app.json 中添加路径，疯狂打 call

水平方向的 margin 用 rpx 比较好
垂直方向 margin 用 px 比较好

//页面之间父子关系，有返回按钮
//对应 onHide
wx.navigateTo({
    url: "../posts/posts"
});
// 页面之间是平等的，没有返回按钮
// 对应 onUnload
wx.redirectTo({
    url: "../posts/posts"
});

onUnLoad 和 onHide

data 数据的绑定在 onLoad 之后
异步的话必须用 setData()

template 模板

event.currentTarget.dataset.xxx

缓存
wx.setStorageSync(‘key’,’value’)

数据绑定 有利于单元测试

快捷键

command + p 搜索打开文件
command + e 最近打开