【微信小程序】基础

学习地址：小程序云测-MiniTest

小程序示例源码：https://github.com/wechat-miniprogram/miniprogram-demo

微信原生组件 JS-API

网页开发工具包 JS-SDK

微信 Web 资源离线存储

小程序项目文件构成

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

app.json：

app.json 是当前小程序的全局配置，包括了小程序的所有页面路径、界面表现、网络超时时间、底部 tab 等。

{
  "pages":[
    "pages/index/index",
    "pages/logs/logs"
  ],
  "window":{
    "backgroundTextStyle":"light",
    "navigationBarBackgroundColor": "#fff",
    "navigationBarTitleText": "Weixin",
    "navigationBarTextStyle":"black"
  }
}

1. pages字段 —— 用于描述当前小程序所有页面路径，这是为了让微信客户端知道当前你的小程序页面定义在哪个目录。
2. window字段 —— 定义小程序所有页面的顶部背景颜色，文字颜色定义等。

project.config.json:个性化配置初始化工具

page.json:可以独立定义每个页面的一些属性，例如刚刚说的顶部颜色、是否允许下拉刷新等等

wxml:小程序的 WXML 用的标签是 view, button, text 等等，这些标签就是小程序给开发者包装好的基本能力，我们还提供了地图、视频、音频等等组件能力。

WXSS 样式：WXSS 具有 CSS 大部分的特性，小程序在 WXSS 也做了一些扩充和修改。

JS 逻辑交互：

D:\workspace\appdemo\miniprogram\pages\index\index.ts：

加javascript

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

D:\workspace\appdemo\miniprogram\pages\index\index.wxml：

加处理逻辑

<view>{{ msg }}</view>
<button bindtap="clickMe">点击我</button>