前言
去年9月份的时候,小程序开发者工具还需要破解,每个版本的API会有一些改进,所以在开发的过程中要不时的检查自己项目中用到的API,如果发现你的项目挂了,去查看官方文档,小程序学习难度较RN容易,实质上是一个MVVM模式,无需操作DOM,实现数据绑定,推荐小程序学习方法: 最好的教程是官方文档,但是不建议把官网所有内容全部看一遍,意义不是很大,而是你需要做什么样的功能的时候再去查文档,文档正确的打开方式你有get到吗?在熟悉了基本的用法之后可以去试着理解一下小程序的生命周期,这对帮助你理解事件处理函数应该绑定在哪一个状态下有帮助。
快速创建一个小程序
- 点击添加项目
2.如果没有AppID就选择无AppID,无AppID无法进行真机预览,以及上传,某些API无法使用
开发者工具简单介绍
左侧菜单
- 编辑
- 调试
1.在source下Mac使用command+P(windows下使用Ctrl+P)可以快速打开查找文件的搜索框进行断点调试,记住选择[sm]文件
2.Appdata显示当前页面从后台获取到的数据结构及内容
3.Wxml模式下可以查看页面css
- 项目
4.编译
5.后台
在模拟器上模拟App在后台运行时的状态,可以查看此时页面处于生命周期的哪一步,其他的用处暂时还没研究到
6.缓存,可以清理文件缓存和数据缓存,缓存的信息显示在调试>>Storage中
关于处理缓存的API 如wx.clearStorage(),更多用法参考官网
7.关闭
项目结构
- 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 等
(1)项目中所有的pages下的文件目录必须要写在pages下,pages是一个包含所有页面路径的数组集合,第一个元素是页面的首页
(2)window用于设置小程序的状态栏、导航条、标题、窗口背景色,pages文件夹下每个页面的.json只能设置 window 相关的配置项,以决定本页面的窗口表现,所以无需写 window 这个键,在这里的配置项会覆盖掉app.json下的同名属性
- app.wxss 设置全局样式