注册
https://mp.weixin.qq.com/
上面这个网址,是注册小程序用的
小程序语法特点
小程序适配方案
创建小程序
点开微信开发者工具,创建一个小程序
注意那个AppId,可以在最上面那个网址里面拿到
工具介绍
左上角个人中心,扫码登录
模拟器跟编辑器对应这两块区域
这是调试器
点击编译,就会重新跑一遍程序,点击预览,就会生成一个二维码,然后可以真机体验
注意,这个二维码只有开发的人扫才有用,如果想让别人扫,再次打开最上面的网址,点成员管理,添加它为体验成员就可以了
如果点自动预览,不用扫二维码,自动在开发者的手机上出现
点真机调试的话,会出现一些只有在真机上才会出现的报错
自动生成文件介绍
- project.config.json
就是一些配置的东西,基本不动代码;点击右边的详情,勾选这些项目,这个文件里的配置也就会随之改变
唯一建议直接改的就是上面这两个,开发的过程中有更改的需求,就可以改 - sitemap.json
文件用于配置小程序及其页面是否允许被微信索引,其实就是影响小程序的曝光率,介绍文档看下面
https://developers.weixin.qq.com/miniprogram/dev/reference/configuration/sitemap.html
page就是哪些页面可以被索引 - app.js
app——application——主组件
全局页面下必须要有app.js,文件里面必须要有App调用,作用是用来注册整个小程序的应用,详细看下面网址
https://developers.weixin.qq.com/miniprogram/dev/reference/api/App.html
去看里面的生命周期函数 - app.json
小程序根目录下的 app.json 文件用来对微信小程序进行全局配置,详细看下面网址
https://developers.weixin.qq.com/miniprogram/dev/reference/configuration/app.html
pages属性:页面路径列表
未指定 entryPagePath 时,数组的第一项代表小程序的初始页面(首页),注意这句话,看下面第三张图,结合这句话理解,首页将会是pages/index/index,如果把两行调换一下位置,首页将变成pages/logs/logs
window属性:全局的默认窗口表现,用于设置小程序的状态栏、导航条、标题、窗口背景色
- app.wxss
放公共样式
- index文件夹
index.js
index.wxml
注意view标签,就相当于div
index.json
局部配置文件
新建page文件
当我们点击这个新建page时,会自动生成这四个index的文件,然后在app.json中自动写好路径
放置静态文件
微信开发者工具没办法在软件上直接粘贴图片,所以需要在文件夹里面操作;注意,建一个static文件夹,把images文件夹放进去比较好,注意看下图src怎么写
写CSS
注意class写法,然后到wxss文件下面写就行
讲一下适配,如果要适配,就要使用rpx做单位,记住1px = 2rpx
背景颜色完全改变,注意把最外层那个page高度变成百分之百,再把里面最外层的view的高度变成百分之百就行
优化,把这个page样式放到公共样式里面
数据绑定
生命周期函数
按以下图片顺序执行
事件绑定
注意,tap相当于vue的onclick
冒泡:先执行子,再执行父
路由跳转