小程序开发

开发流程:git

1. 申请帐号
2. 下载安装开发者工具
3. 熟悉默认demo
4. 代码构成:JSON,WXML,WXSS,JS
5. 小程序能力:
-- 启动:微信客户端下载小程序代码-根据配置启动加载app.json中pages的第一个页面--启动后回调执行app.js中App实例的onLaunch。
-- 程序和页面:加载一个页面,首先加载json配置, 在加载wxml,wxss,最后加载js,结合js中的data数据进行渲染,渲染完成后执行onLoad回调。
-- 组件:微信提供的各类样式组件,如:view,swiper,text,input,navigator,image,map,canvas等。
-- API: 提供微信自己能力的一些接口,如:获取微信用户信息,微信支付,获取地理位置,扫一扫等。
注:启动前后顺序为onLaunch(app)-onShow(app)-onLoad(index)-onShow(index)-onReady(index)
onUnload: 返回和redirectTo触发
onHide: navigationTo触发
6. 构思设计/开发/预览/发布/运营

组件:github

视图容器:view, swiper, scroll-view, movable-view, cover-view;
基础内容:text, icon, rich-text, progress;
表单组件:input, label, checkbox, radio, button, form, picker, picker-view, slider, switch, textarea;
导航:navigator;
媒体组件:audio, image, video, camera, live-player, live-pusher;
地图:map;
画布:canvas;
开放能力:open-data, web-view;

API:web

网络:发起请求、上传下载、WebSocket

媒体:图片、录音、录音管理、音频播放控制、音乐播放控制、背景音频播放管理、音频组件控制、视频、视频组件控制、相机组件控制、实时音视频

文件:文件的获取、存储、打开、删除

数据缓存:缓存的设置、获取、移除、清空

位置:获取位置、查看位置、地图组件控制

设备:系统信息、网络状态、加速度计、罗盘、拨打电话、扫码、剪贴板、蓝牙、iBeacon、屏幕亮度、用户截屏事件、振动、手机联系人、NFC、Wi-Fi

界面:交互反馈、设置导航条、设置tabBar、设置置顶信息、导航、动画、位置、绘图、下拉刷新、WXML节点信息、WXML节点布局相交状态

第三方平台:获取配置信息

开放接口:登录、受权、用户信息、微信支付、模板消息、客服消息、转发、获取二维码、收货地址、卡卷、设置、微信运动、打开小程序、打开APP、获取发票抬头、生物认证、附近、插件管理

数据:常规分析、自定义分析

更新:版本更新管理

多线程:建立多线程程序

调试接口:打开/关闭调试

 JSON配置:json

app.json: 当前小程序全局配置,包括了小程序的全部页面路径,界面表现,网络超时,底部tab等。
project.config.json: 开发者工具的个性化配置文件,修改工具的颜色,编译方式等都会写入这个文件。
page.json: 每一个页面的属性配置

  JSON:
  -- json文件不支持注释
  -- json文件使用双引号canvas

WXML模板:小程序

1. 相似HTML,只是打包成了经常使用的组件
2. 不直接操做DOM,进行了状态管理,即便用了wx:if,{{}}等模板表达式

  WXML:
  -- 数据绑定:经过{{变量名}}绑定到内容或属性
  -- 逻辑语法:三元运算,算数运算,字符串拼接,直接置入(数字,字符串,数组)
  -- 条件列表:wx:if,elif,else | wx:for,wx:for-index,wx:for-item | block标签 | wx:key="property/*this"当标签节点变化时保持原有标签状态随着变化
  -- 模板引用:template | import(只引入template) / include(只引入template以外的)
  -- 共同属性:id, class, style, hidden, data-*, bind*/catch*数组

WXSS样式:缓存

相似CSS,作了一些修改
-- 新增了尺寸单位:rpx
-- 提供了全局样式,和局部样式
-- WXSS仅支持部分CSS选择器

  WXSS:
  -- 文件组成:项目公共样式,页面样式,其余样式
  -- 样式的引用:@import './test_0_wxss'
  -- 尺寸单位:rpx, 宽度为375物理像素屏幕下1rpx=375/750=0.5px, iphone6:1rpx=0.5px
  -- 内联样式:与web网页同样,但可使用变量
  -- 选择器:类、id、元素、伪元素(::after,::before),权重:!important>style>#id>.class>element
  -- 样式库:https://github.com/Tencent/weui-wxss微信

WXS:网络

小程序的一套脚本语言

JS交互逻辑:

与用户交互:响应用户点击,获取用户位置等

  JAVASCRIPT:
  -- ECMAScript:ECMAScript+小程序框架+小程序API
  -- 执行环境: ES6,ES5
  -- 模块化: module.export,require
  -- 脚本的执行顺序: app.js,根据app.json中顺序的pages.json
  -- 做用域:文件独立该文件声明的变量只在该文件中有效,全局:使用getApp()得到实例给她赋值,会存在前后顺序,或者直接在app.js中添加全局变量

 其余:

-- backgroundTextStyle: 下拉文字背景色,只支持black/light
-- 在app.json中添加页面,会自动建立wxml等文件