微信小程序

1. 微信小程序简介及优点

    无需安装下载即可使用--需要安装微信(小程序体积很小)

    同APP互补，更简洁，引流

    搜索下载，成本低，实现App主要功能

   小程序没有DOM对象，基于组件开发

   组件：将大的JS文件拆成多个，多个数据是私有的，特定功能拥有特定效果的代码集合

2. 文件格式

    js      形态

    wxml  布局

    wxss 样式

    json  配置文件

3.  配置设置

flex 弹性布局 。 flex-direction

移动端适配

dpr：设备像素比 =物理像素/设备独立像素 。 iphone 6的dpr=2 人类肉眼识别极限高分辨率屏幕=2 ，当3和2在人眼没有区别

ppi：一英寸上的像素个数

小程序适配方案

1rpx=1物理像素=0.5px rpx:微信小程序的像素单位

布局适口=物理适口

4. 事件

    冒泡向上抛出问题

        bind+事件 冒泡

       cache+事件 非冒泡

5. 模板

定义模板：template name指定模板名

使用模板 is css导入@import

<import src="/pages/template/template-list.wxml"/>

@import '/pages/template/template-list.wxss';

 

列表渲染

<block wx:for='{{listArr}}' wx:key='{{index}}' >

<view>

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

</view>

</block>

6. 本地缓存

setStorage

缓存是否收藏文章

缓存前需要获取之前缓存数据，当前缓存数据是基于之前缓存数据的基础上

在onload需要，如果用户第一次进来需要将数据置空

在点击的时候，需要将换出数据进行一个预处理初始化

7. 音乐播放

api使用、采用事件将

将数据可以缓存到app.json

设置以音乐后台播放

"requiredBackgroundModes": [

"audio"

]

github地址：https://github.com/iearl/wxprogram.git