分享

微信小程序

 井梅 2018-09-25

一、简介

1.         微信开发工具使用

2.         小程序代码不能超过1M

二、基本框架

1.         官方文档地址

1)         https://developers.weixin.qq.com/miniprogram/dev/framework/structure.html

2.         页面

1)         UI

A.        wxml

B.        wxss

2)         逻辑

A.        js

3.         配置

4.         逻辑层

1)         注册程序

A.        onLaunch

B.        onShow

C.        onHide

D.        onError

E.         onPageNotFound

2)         注册页面

A.        data

B.        onLoad

C.        onShow

D.        onReady

E.         onHide

F.         onUnLoad

G.        setData

H.        route

3)         路由与页面的生命周期

4)         数据传递

A.        应用到页面

B.        页面间

5)         模块化

A.        模块化后的js运行环境

B.        模块化后的程序开发结构

5.         视图层

1)         数据绑定

A.        逻辑层的data属性映射到视图层

a)         {{}}

2)         条件渲染

A.        ifhidden的区别

B.        <view wx:if="{{condition}}"> True </view>

C.        示例

<view wx:if="{{length > 5}}"> 1 </view>

<view wx:elif="{{length > 2}}"> 2 </view>

<view wx:else> 3 </view>

3)         列表渲染

A.        wx:for

<view wx:for="{{array}}">

{{index}}: {{item.message}}

</view>

B.        block wx:for

C.        wx:key

4)         事件绑定

A.        通过data-*传递,通常只传递引号或唯一id,然后页面逻辑层通过这个键去获取真实数据

三、组件

1.         视图容器

1)         view视图容器

2)         scroll-view可滚动视图区域

A.        scroll-xBoolean false:允许横向滚动

B.        scroll-yBoolean false:允许纵向滚动 使用竖向滚动时,需要给<scroll-view/>一个固定高度,通过 WXSS 设置 height

C.        bindscrolltoupperEventHandle:滚动到顶部/左边,会触发 scrolltoupper 事件

D.        bindscrolltolowerEventHandle:滚动到底部/右边,会触发 scrolltolower 事件

E.         scroll-into-viewString:值应为某子元素idid不能以数字开头)。设置哪个方向可滚动,则在哪个方向滚动到该元素

3)         swipper滑块视图容器

2.         媒体组件

1)         image图片

四、API

1.         Request网络请求

2.         登录

1)         wx.login

3.         数据缓存

1)         同步与异步缓存的区别

A.        同步操作安全但可能影响性能

B.        异步操作提供更好的性能但使用要小心

C.        选择条件

a)         操作的量 少的话同步

b)         操作的频繁度

2)         同步缓存

A.        wx.setStorageSync 同步写入

B.        wx.getStorageSync 同步读取

C.        wx.getStorageInfoSync 同步获取当前storage的相关信息

D.        wx.removeStorageSync 从本地缓存中同步移除指定 key

E.         wx.clearStorage 清理本地数据缓存。

3)         异步缓存

A.        ws.setStorage 异步写入

B.        wx.getStorage 异步读取

C.        wx.getStorageInfo 异步获取当前storage的相关信息

D.        wx.removeStorage 从本地缓存中异步移除指定 key

E.         wx.clearStorageSync 同步清理本地数据缓存

4.         设备状态

1)         系统信息

A.        wx.getSystemInfoSync 获取系统信息同步接口

B.        wx.getSystemInfo 获取系统信息

5.         支付、模板消息

五、实例开发

1.         新开发环境:labrador

1)         专门为小程序开发的组件化开发框架

A.        优势:

a)         使用async/await有效避免回调地狱

b)         引用fbemitternpm

c)         可以使用less文件

B.        安装:

a)         需要npm3node.js

b)         npm install -g labrador-cli

c)         创建项目样式

1.         mkdir demo

2.         cd demo

3.         npm init

4.         labrador init

d)         开发自动转换代码

1.         labrador watch

2.         新编程模式:fbemitter事件驱动编程

3.         新编辑器:EgretWing

4.         应用配置:emitter

5.         登录与授权:

1)         流程

A.        获取token接口

B.        获取用户信息

C.        token校验接口

D.        请求登录

2)         基础知识点

A.        await:等待异步完成

6.         首页开发

1)         科目一科目四按钮切换样式及时间

2)         请求api获取汇总数据

3)         个人信息展示

4)         进度条部分

A.        标题

B.        进度条

C.        表示及数据

5)         答题选项

7.         答题页面开发

1)         逻辑层开发

2)         页面开发

    本站是提供个人知识管理的网络存储空间,所有内容均由用户发布,不代表本站观点。请注意甄别内容中的联系方式、诱导购买等信息,谨防诈骗。如发现有害或侵权内容,请点击一键举报。
    转藏 分享 献花(0

    0条评论

    发表

    请遵守用户 评论公约

    类似文章 更多