微信小程序入门

初步认识

与前端开发比较类似，包含HTML、css、js相似的代码。但是，当然有不同之处。

原生项目结构

举例：一个最简单的示例项目，如下图：

QQ.png

QQ.png

QQ.png

项目里生成了不同类型的文件

.json 后缀的 JSON 配置文件
.wxml 后缀的 WXML 模板文件
.wxss 后缀的 WXSS 样式文件
.js 后缀的 JS 脚本逻辑文件

》》以上4种文件的作用

.json文件

1、app.json
整个小程序的全局配置，包括所有页面路径、网络超时时间、底部 tab 等。如：

{
  "pages":[        //  描述当前小程序所有页面路径。
    "pages/index/index",
    "pages/logs/logs"
  ],
// 以上说明，项目定义了两个页面，分别位于 pages/index/index 和 pages/logs/logs 目录

  "window":{     //  所有页面的顶部背景颜色，文字颜色
    "backgroundTextStyle":"light", 
    "navigationBarBackgroundColor": "#fff",
    "navigationBarTitleText": "WeChat",
    "navigationBarTextStyle":"black"
  }
}

2、project.config.json
工具的一些个性化配置，在工具上做的任何配置都会写入到这个文件，包括编辑器的颜色、代码上传时自动压缩等一系列选项。

.WXML文件

类似 HTML 的角色，用来描述当前页面的结构。文件的内容如下：

  
     获取头像昵称 
    
      
      {{userInfo.nickName}}
    
  

有标签、属性等构成。但是也有与HTML不一样的地方。如：
1、标签名字，小程序的 WXML 用的标签是 view, button, text 等，包装好了组件的基本能力。此外还有地图、视频、音频等等组件。
2、多了一些用 wx: 开头的属性和{{ }} 表达式，目的是把渲染和逻辑分离— —不再让 JS 直接操控 DOM，JS只需管理状态即可，然后再通过一种'模板语法'来描述状态和界面结构的关系。通过{{}}这种语法，把一个变量绑定到界面上。如{{normalTitle}}

.WXSS文件

具有 CSS 大部分的特性，并有一些扩充和修改。

新的尺寸单位 rpx
提供了全局的样式和局部样式。如app.wxss 作为全局样式，会作用于小程序的所有页面，局部页面样式 page.wxss 仅对当前页面生效。

.js文件

和用户做交互，处理用户的操作：响应用户的点击、获取用户的位置等。
如：点击 button 按钮，把界面上 msg 显示成 "Hello World"，于是我们在 button 上声明一个属性: bindtap

{{ msg }}
点击我

在 js 文件里声明 clickMe 方法来响应点击操作：

Page({
  clickMe: function() {
    this.setData({ msg: "Hello World" })
  }
})

此外，还可以在 js 中调用小程序丰富的 API，可以方便调起微信提供的，如获取用户信息、本地存储、微信支付等功能。https://mp.weixin.qq.com/debug/wxadoc/dev/api/

PS：多数 API 的回调都是异步，需要处理好代码逻辑

小程序项目启动

小程序启动之后，在 app.js 定义的 App 实例的 onLaunch 回调会被执行：

App({
  onLaunch: function () {        // 小程序启动之后 触发
  }
})

整个小程序只有一个 App 实例，是全部页面共享的

小程序的页面

一个页面包含上述的4种文件。客户端先根据.json 配置生成一个界面，接着装载WXML 结构、WXSS 样式，最后装载 .js文件。

/* Page 是一个页面构造器，这个构造器就生成了一个页面
Page({
  data: {    // 参与页面渲染的数据
    logs: []
  },
  onLoad: function () {       // 页面渲染后 执行

  }
})

相关资料

https://mp.weixin.qq.com/debug/wxadoc/dev/quickstart/basic/getting-started.html