微信小程序(1)

微信小程序(1) 了解微信小程序

---

1. 下载并安装微信小程序IDE

1.官网注册https://mp.weixin.qq.com/，并下载相应的IDE。
2.运行下载的安装包

3.根据一般安装方法安装微信小程序的IDE

一直按照默认配置安装即可。

---

2. 微信小程序项目框架了解

1.创建项目，没有AppID的话，只是部分功能受限，不会太影响我们如今的学习。如果需要上传小程序的话，需要个人去注册并申请相应的AppID。

2.建立“普通快速启动模板”，其项目目录如下：

• app.js——整个项目的启动文件
  注释写的onlaunch方法有三大功能：

  • 浏览器缓存进行存和取数据
  • 用登陆成功的回调
  • 获取用户信息

  globalData是定义整个项目的全局变量或者常量。
  此外，若需要调用API的时候，一般我们会在该文件中的定义一些API变量，如API: "https://api.douban.com"，之后在需要某个页面调用该API的时候，使用app.globaData.API就能够使用该变量。
  【为了整个项目的维护，还是建议把这种公用参数统一写在配置文件中】

• app.json——整个项目的配置文件

  • 注册页面
  • 配置tab页
  • 设置整个项目的样式
  • 页面标题等等

  注意：小程序启动默认的第一个页面，就是app.json的pages中的第一个页面。

• pages——小程序的页面组件
  有几个页面就会有几个子文件夹。
  在快速启动模板中，就有两个页面，index和logs
• index目录——index页面
  有三个文件，与web开发的文件是一一对应的
  
  • index.wxml -> index.html
  • index.wxss -> index.css
  • index.js(js文件)
    js文件中的部分函数解释：
    
    • var app = getApp();
      引入整个项目的app.js文件，用来取期中的公共变量等信息
    • 整个page({})中，第一个data，就是本页面组件的内部数据，会渲染到该页面的wxml文件中(类似于vue、react)，通过setData修改data数据，驱动页面渲染
    • 一些生命周期函数
    • onload() (监听页面加载)
    • onready() (页面初次渲染)
    • onshow() (页面显示)
    • onhide() (页面隐藏)
    • onShareAppMessage() (设置页面分享的信息)
    • …… (更多的可查官网API)
  • .json文件
    作为该页面组件的配置文件，设置页面标题等功能。
    json中不能写注释，不然容易出错。