微信小程序开发-1-开发流程和开发基础

小程序开发前的准备

• 注册小程序帐号

• 激活邮箱

• 信息登记

• 登陆小程序管理后台-多人协同开发，须要在管理后台绑定开发者信息

• 完善小程序信息

• 绑定开发者

小程序的版本

1. 预览版本
2. 开发版本
3. 体验版本
4. 送审版本
5. 线上版本

细节

• 查看已上线小程序相关数据分析-小程序数据助手
• AppSecret(小程序密钥)
• AppID(小程序ID)

目录介绍

• app.js 是帮咱们注册一个微信小程序的应用
  • App({})生命周期钩子、事件处理函数、data数据
• app.json 是对微信小程序的全局配置
• helloWorld.js 文件 Page({}) 生命周期钩子、事件处理函数、默认数据
• helloWorld.json helloWorld的配置
• helloWorld.wxml
• hellowWorld.wxss
• 这四个文件须要保持命名一致

wxml

是框架设计的一套标签语言，结合组件、wxs和事件系统，能够构建出页面结构

1. 特性

1. 数据绑定

<view hidden="{{flag ? true : false}}">
 <text data-name="{{theName}}"></text>
</view>

2. 列表渲染

<view>
    <block wx:for="{{items}}" wx:for-item="item" wx:key="index">
    </block>
    // block标签不是一个组件，只是一个包装元素，在页面渲染时是不会被渲染出来的
</view>

3. 模板引用
   • 用template标签，里面能够包含代码片断
   • name属性是模板名称，在外面能够直接使用模板
   • 经过is属性能够声明须要使用的是哪一个模板，也可进行动态的数据绑定
   • 模板拥有本身的做用域，只能经过data属性向模板传入对应的数据

// index.wxml
<template name="tempItem">
    <view>
        姓名: {{name}}
    </view>
</template>

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

// index.js
Page({
    data:{
        item: {
            name: '张三'
        }
    }
})

4. 条件渲染

<view wx:if="{{conditioin === 1}}">
    米饭1
</view>
<view wx:elif="{{conditioin === 2}}">
    米饭2
</view>
<view wx:else>
    米饭3
</view>

2. 属性

1. id
2. class
3. style 内联样式，能够动态设置内联样式
4. hidden 组件是否显示，全部组件默认显示
5. data-* 自定义属性，组件上触发事件时，会发送给事件处理函数
6. bind* / catch* 组件的事件

3. 文件引用

1. import
   • 所引用的模板文件的模板，只能渲染其模板对应内容
   • 有做用域概念，只能引用目标文件template模板，若是目标文件里面嵌套了其余文件的template模板，是不会被引用到的
   • 也避免了引用模板死循环的问题，

// index.wxml
<import src="a.wxml"></import>
<template is="a"></template>

// a.wxml
<view>hello world1111</view>
<template name="a">
    hello world2222
</template>

// 渲染结果
hello world2222

2. include

• 会引用除了模板代码块之外的其余全部内容，至关于拷贝到了include的位置

// index.wxml
<include src="a.wxml"></import>
<template is="a"></template>

// a.wxml
<view>hello world111</view>
<template name="a">
    hello world2222
</template>

// 渲染结果
hello world111

wxss

与css相比作了的修改和补充

1. 尺寸单位 rpx
   • 响应式像素
2. 样式导入
   • 外联样式经过@import导入
3. 内联样式
4. 选择器

rpx

1. 设备像素（device pixels）
   • 设备能控制显示的最小物理单位，这些单位是屏幕上的一个个点，这些点是固定不变的
2. css像素（css pixels）
   • 是外部编程的概念，css代码中所使用的逻辑像素
3. PPI/PPD（pixels per inch）
   • 每英寸所拥有的像素数目，数值越高表明咱们能以更高的密度显示图像

屏幕分辨率： X * Y
PPI = 开平方( X² + Y²) / 屏幕尺寸

iphone6为例：
开平方(750² + 1334²) / 4.7  = 325.6

4. DPR （device pixels ratio）
   • 手机的某一方向上，设备像素和css像素之比，模拟器后面有DPR标识
5. rem
   • 根据html根元素的font-size大小来肯定的
6. rpx
   • 不能直接操做html的样式属性，因此rem失效了
   • 解决方案rpx，规定了屏幕宽度为750rpx，能够根据屏幕宽度进行自适应
   • 实现原理和rem实现原理很类似，并且rpx最终也是转换成了rem

选择器的优先级

• element 1
• class 10
• id 100
• style 1000
• !important 无穷大

小程序中的JavaScript

小程序插件

• 把某个功能插件封装起来作成插件分享给别人

nodejs中的JavaScript

• ECMAScript
• Native
  • 原生模块
• Npm

浏览器里面的JavaScript

• ECMAScript
• BOM
• DOM

小程序中的JavaScript

• ECMAScript
• 小程序框架
• 小程序API
• 与浏览器JavaScript相比没有DOM对象和BOM

小程序宿主环境的差别

小程序在不一样平台的脚本运行环境也是不同

• IOS
  • 小程序js代码是运行在JavaScriptCore中，由wk webview渲染
  • 小程序中,ios8和ios9的运行环境并无彻底兼容到es6，因此es6某些关键字和语法在ios8和ios9中
  • 常常发现某些功能在模拟器和真机上的表现不一致，能够经过远程调试功能在真机上调试；
• Android
  • 小程序js代码是经过X5 jsCore解析，由X5内核渲染
• 微信开发者工具
  • 小程序js代码是运行在nwjs中，是由chorme webview渲染
  • nwjs,封装了nodejs 和 webkit内核，提供了桌面应用的运行环境，让运行在网页的应用能够在桌面端运行

wxs（wxScript）

• 将请求到的数据进行计算或者filter处理，帮助wxml快速构建出页面结构
• 放到UI线程处理，会避免跨线程通讯的消耗

语言特性

• 模块
• 变量
• 注释
  • 单行、多行、结尾注释（/*）
• 运算符
• 语句
  • 和js同样，不一样的是不支持try catch
• 数据类型
  1. number
  2. string
  3. boolean
  4. function
  5. array
  6. object
  7. date; getDate
  8. regexp; getRegexp
  • 判断是哪一种数据类型能够经过constructor属性来判断
• 基础类库
  1. Number
  2. Date
     • 只提供es5中Date构造函数三个方法
     • Date.parse() 解析字符串形式的日期时间，返回该时间的Unix时间戳
     • Date.now() 返回当前时间的Unix时间戳
     • Date.utc() 返回指定日期的时间戳
  3. Global
  4. Json
  5. console
     • 只提供console.log()
  6. Math

模块

• 标签 wxs标签
• 文件 .wxs后缀
  • 在一个页面中，不能重复声明wxs模块名，不然后面的会覆盖前面的

// 标签 index.wxml
// wxs有做用域， wxs 标签和 wxs文件内定义的变量对外都是不可见的
<wxs module="m1">
    module.exports = {
        msg: 'hello'
    }
</wxs>
<view>{{ m1.msg }}</view>

// 文件 .wxs后缀
// index.wxml
<wxs src="./m2.wxs" module="m2"></wxs>
<view>{{m2.msg}}</view>

// m2.wxs
module.exports = require('./m1.wxs')

// m1.wxs
module.exports = {
    msg: 'hello world'
}

小程序开发框架MINA框架底层实现和运行机制

MINA框架组成

• View层
  • page,wxml,wxss
• App Service 逻辑层
  • Manager 逻辑处理部分的执行
  • API WAService.js的文件，封装接口，让各个平台的接口都能经过这个api使用微信客户端的能力
  • 整个小程序只有一个app service，而且整个生命周期是常驻内存的
  • 是由 app service 线程来加载运行的
  • 视图层和逻辑层是双线程通讯的，提供了数据传输data和事件event系统
  • 视图层和逻辑层是经过系统层的JSBridge通讯的；
    • 逻辑层把数据变化通知到视图层，而后触发视图层的页面更新
    • 视图层把事件通知到逻辑层进行业务处理，
• Native 系统层
  • JSBridge
  • 微信能力
  • 离线存贮
  • 网络请求...

视图层是如何将数据变化实时展现出来的

• 首先咱们知道wxml是一个具备元素属性和文本的节点树结构，在节点树结构中，每一个节点都是有上下文的关系；
• 在渲染wxml时，小程序的运行环境，会把wxml转化成js对象，AST抽象语法树
• 在逻辑层发生数据变动时，须要经过App Service的setData方法，把数据从逻辑层传递到视图层
• webview容器在渲染节点内容时会把传过来的数据进行一个先后差别对比，这个差别是经过deep算法计算的
• 而后把差别运用在原来的节点树上，渲染出正确的ui界面

启动运行机制

运行机制-启动

1. 冷启动
   • 首次打开或被微信
   • 主动销毁
     • 超过5min
     • 5s内连续收到两次系统告警
2. 热启动
   • 打开过，必定时间再次打开时，从后台切换到前台

运行机制-更新

• 冷启动时发现有新的版本，这时会帮咱们异步下载最新版本代码包；
• 同时用微信客户端本地的包进行启动，下次打开小程序才能应用上
• 若是立刻用到最新版本的代码包，须要调用api

运行机制-加载