小程序入门1

前言

去年9月份的时候，小程序开发者工具还需要破解，每个版本的API会有一些改进，所以在开发的过程中要不时的检查自己项目中用到的API，如果发现你的项目挂了，去查看官方文档，小程序学习难度较RN容易，实质上是一个MVVM模式，无需操作DOM，实现数据绑定，推荐小程序学习方法： 最好的教程是官方文档，但是不建议把官网所有内容全部看一遍，意义不是很大，而是你需要做什么样的功能的时候再去查文档，文档正确的打开方式你有get到吗？在熟悉了基本的用法之后可以去试着理解一下小程序的生命周期，这对帮助你理解事件处理函数应该绑定在哪一个状态下有帮助。

快速创建一个小程序

1. 点击添加项目

Paste_Image.png

2.如果没有AppID就选择无AppID，无AppID无法进行真机预览，以及上传，某些API无法使用

Paste_Image.png

开发者工具简单介绍

左侧菜单

• 编辑
• 调试
  1.在source下Mac使用command+P（windows下使用Ctrl+P）可以快速打开查找文件的搜索框进行断点调试，记住选择[sm]文件

Paste_Image.png

2.Appdata显示当前页面从后台获取到的数据结构及内容

Paste_Image.png

3.Wxml模式下可以查看页面css

• 项目

Paste_Image.png

4.编译
5.后台
在模拟器上模拟App在后台运行时的状态，可以查看此时页面处于生命周期的哪一步，其他的用处暂时还没研究到
6.缓存，可以清理文件缓存和数据缓存，缓存的信息显示在调试>>Storage中
关于处理缓存的API 如wx.clearStorage()，更多用法参考官网
7.关闭

项目结构

Paste_Image.png

• pages
  放置页面文件，表示页面下有index和logs 2个文件
  .wxml放置html文件，.wxss放置css文件
  可以在app.json的pages中快速创建pages下的文件目录
  例如在app.json的pages下添加"pages/test/test"就会在pages下自动生成test目录
  手动创建pages下的文件需注意.json文件在为空的时候要放置一个{}，.js文件为空时也要添加Page({})注册函数，否则会出现“pages/test/test 出现脚本错误或者未正确调用 Page()”的错误
• utils
  放置功能性的js，供整个项目使用的
  业务性的js建议放在pages下各个项目对应的js文件中
• app.js页面入口文件js，注册了一个App({})，globalData对象中设置全局变量，在其他js文件中调用的时候采用getApp()，例如：var app = getApp();
• app.json页面配置文件，我们使用app.json文件来对微信小程序进行全局配置，决定页面文件的路径、窗口表现、设置网络超时时间、设置多 tab 等

Paste_Image.png

(1)项目中所有的pages下的文件目录必须要写在pages下，pages是一个包含所有页面路径的数组集合，第一个元素是页面的首页
(2)window用于设置小程序的状态栏、导航条、标题、窗口背景色，pages文件夹下每个页面的.json只能设置 window 相关的配置项，以决定本页面的窗口表现，所以无需写 window 这个键，在这里的配置项会覆盖掉app.json下的同名属性

• app.wxss 设置全局样式