WechatApp-LifeAssistant

小程序开发体验

Hello world

• 创建项目（参考微信小程序官网）

• 项目结构

  

  ####简约的结构图

  

  #####页面结构

  每个页面组件也分为四个文件组成：

  [page-name].js 页面逻辑文件，用于创建页面对象，以及处理页面生命周期控制和数据处理

  [page-name].json 设置当前页面工作时的window的配置，此处会覆盖app.json中的window设置，也就是说只可以设置window中设置的属性

  [page-name].wxml

  wxml指的是Wei Xin Markup Language

  用于定义页面中元素结构的，语法遵循XML语法，注意是XML语法，不是HTML语法，不是HTML语法，不是HTML语法

• hello world

  理解微信小程序的架构

  一般都是根据这个平台的hello world示例

  项目的配置

  一个页面是由多个文件组成

   js   ：定义页面的逻辑
   json ：
   wxml
   wxss
  

• 小程序的逻辑写在哪里

• 如何完成小程序的逻辑和界面

• 小程序的界面如何开发

知识储备

基础：HTML+JS+CSS，需要会，但是不是直接用这些做开发

更好的话：React Vue

开发进阶

UI组件使用

API详解

模块化

小程序开发中，我们JS代码的组织方式就是以CommonJS的规范来组织

小程序开发实战-豆瓣电影

对项目进行配置

在项目下的app.json中配置

规划整个程序的页面并做配置

在pages/下创建每一个页面，每个页面都是一个文件夹包含4个文件 js wxml wxss json

在项目下的app.json中配置页面

pages中第一项会作为默认页面呈现

完成榜单页面

注意：如果需要点击时高亮，可以给元素加上cursor：pointer;

页面与页面之间的跳转，可以使用navigator组件

页面与页面之间的传值方式：

类似于web开发的方式：问号参数

跳转到的页面通过onLoad方法的参数拿到

列表页

详细页面

微信小程序案例分析

• AppleMusic:播放音乐功能
• cnode：评论条板块
• gank/hiapp：加载等待功能
• leantodo:设置登录功能
• movecss:导航栏功能

微信小程序

• 用户体验好：不需下载安装再使用
• 开发容易：无需开发iOS系统和安卓系统版本等
• 便于小企业实现自己的想法

小程序特点：

• 小程序适合做简单的、用完即走的应用

• 小程序适合低频应用

• 小程序适合性能要求不高的应用（用户操作比较简单

• 小程序 数据优先、没有Windows-dom template思想 支持es6

• 不适合如：知乎社区、斗鱼直播（）、大型手游

• 适合如：饿了么、猫眼、滴滴打车、豆瓣等部分功能能拆分出来

小程序对开发者的要求：

• JavaScript

• ES6（promise特性）

• css（flex）

• 非常适合新手

• 没有小程序号的限制