小程序学习（三）

1. 模版，

   <template name="msgItem">

     <view>

       <text> {{index}}: {{msg}} </text>

       <text> Time: {{time}} </text>

     </view>

   </template>

   使用模版

   <template is="msgItem" data="{{...item}}”/>

2. flex布局

   width: 100%;

   flex-direction: row;（默认是row）

   justify-content:flex-start|flex-end|center|space-between|space-around|initial|inherit;

   white-space: nowrap;

3. scroll-view组件

   1.scroll-view 中的需要滑动的元素不可以用 float 浮动；

   2.scroll-view 中的包裹需要滑动的元素的大盒子用 display:flex; 是没有作用的；

   3.scroll-view 中的需要滑动的元素要用 dislay:inline-block; 进行元素的横向编排；

   4.包裹 scroll-view 的大盒子有明确的宽和加上样式-->  overflow:hidden;white-space:nowrap;

4. 小程序登陆的安全逻辑

• 用户通过wx.login()从微信获取code，用户将code发送到开发者 服务器，

• 开发者服务用利用 注册小程序的 appid + appsecret+code 向微信获取openid + session_key.

• https://api.weixin.qq.com/sns/jscode2session?appid=APPID&secret=SECRET&js_code=JSCODE&grant_type=authorization_code

• 会话密钥session_key 是对用户数据进行加密签名的密钥。为了应用自身的数据安全，开发者服务器不应该把会话密钥下发到小程序，也不应该对外提供这个密钥

 

1. 组件：外部样式类 Component({

    externalClasses: ['my-class']})<!-- 组件 custom-component.wxml -->

2. <custom-component class="my-class">这段文本的颜色由组件外的 class 决定</custom-component>

      <!-- 页面的 WXML --> 

   <custom-component my-class="red-text" />

3. 组件可以指定它所在节点的默认样式，使用 :host 选择器 /* 组件 custom-component.wxss *

   :host {

     color: yellow;

   }

4. Component({

     options: {

       multipleSlots: true // 在组件定义时的选项中启用多slot支持

     },

     properties: { /* ... */ },

     methods: { /* ... */ }

   })

   <!-- 组件模板 -->

   <view class="wrapper">

     <slot name="before"></slot>

     <view>这里是组件的内部细节</view>

     <slot name="after"></slot>

   </view>

   <!-- 引用组件的页面模版 -->

   <view>

     <component-tag-name>

       <!-- 这部分内容将被放置在组件 <slot name="before"> 的位置上 -->

       <view slot="before">这里是插入到组件slot name="before"中的内容</view>

       <!-- 这部分内容将被放置在组件 <slot name="after"> 的位置上 -->

       <view slot="after">这里是插入到组件slot name="after"中的内容</view>

     </component-tag-name>

   </view>

<button open-type="getUserInfo" bindgetuserinfo="getUserInfo" class='get-avatar color-i' wx:if='{{!userInfo.headpicurl}}' bindtap='toAvatar'>

<button class='button-large bg-orange color-i size-2' open-type='getPhoneNumber' bindgetphonenumber='getPhoneNumber' >微信用户快速登录</button>

bindgetuserinfo:用户点击该按钮时，会返回获取到的用户信息，回调的detail数据与wx.getUserInfo返回的一致

getUserInfo(Object),Object参数包括

注：当 withCredentials 为 true 时，要求此前有调用过 wx.login 且登录态尚未过期，此时返回的数据会包含 encryptedData, iv 等敏感信息；当 withCredentials 为 false 时，不要求有登录态，返回的数据不包含 encryptedData, iv 等敏感