微信小程序学习(一)

微信小程序初探

准备

1. 下载并安装 微信web开发者工具
2. 申请一个小程序账号, 点击 https://mp.weixin.qq.com/wxopen/waregister?action=step1 根据指引填写信息和提交相应的资料, 就可以拥有自己的小程序帐号
3. 登录微信公众平台, 在菜单 “设置”-“开发设置” 看到小程序的 AppID

   注意:小程序的 AppID 相当于小程序平台的一个身份证, 后续你会在很多地方要用到 AppID

你也可以参考小程序官方简易教程

第一个小程序

打开微信web开发者工具, 用微信扫码登录开发者工具
新建项目选择小程序项目, 选择代码存放的硬盘路径, 填入刚刚申请到的小程序的 AppID, 给你的项目起一个好听的名字, 最后, 勾选 “创建 QuickStart 项目” ( 注意: 你要选择一个空的目录才会有这个选项 ), 点击确定, 你就得到了你的第一个小程序了

小程序的目录结构

开发者工具将会生成基本框架, 初始化并包含了一些简单的代码文件, 其中app.js、app.json、app.wxss 这三个是必不可少的, 小程序会读取这些文件初始化实例

/pages
    /index
        /index.js
        /index.wxml
        /index.wxss
    /logs
/utils
    /util.js
/app.js
/app.json
/app.wxss

• index 文件夹：首页
• logs 文件夹：日志(不必须)
• utils 文件夹：公共的、通用的文件夹, utils.js 存放公用代码, 比如系统默认写入的日期转化函数
• app.js: 逻辑文件
• app.json: 配置文件, 有多少个 appy 页面都要在这注册, 还可以进行窗口样式配置
• app.wxss: 公共的样式表文件

文件实质:
wxml => html
js => 逻辑
wcss => css

开发者工具调试区介绍

• Console
  Console的意思是控制台, 做过开发的都知道几乎每个IDE都会有控制台, 可以显示错误信息和打印变量的信息等
• Sources
  Sources显示了当前项目的所有脚本文件, 微信小程序框架会对这些脚本文件进行编译。
  Source下边还有一个区域, 做过软件开发的都知道, 一般下边是控制台会显示一些log信息、断电调试等等。
• Network
  有网络请求时, 显示与网络相关的信息
• Storage
  显示当前项目的使用 wx.setStorage 或者 wx.setStorageSync 进行本地存储后的数据存储情况
• AppData
  显示当前项目显示的具体数据, 比如事件对象等