小程序新手入门-简单实现页面跳转(1)
打开微信开发者工具,左边选择小程序
,右边点击+号图片
- 然后会弹出创建形式
我这里左边选中的是小程序
,右边选的新建项目
,项目名称
可以自定义任意名字,目录
要保证选中的是一个空目录,AppID
我选的测试号,格式如下
2. 创建完成后会弹出如下界面
- 上方的三个绿色
模拟器
编辑器
调试器
分别对应下方三个界面模拟器
是左边的一个模拟手机的小程序界面编辑器
是右上的文件和代码区域调试器
是右下的一个基于chrome的调试工具 -
编辑器
中
打开pages
文件夹可以看到index
和logs
文件夹
打开任一文件夹下我们都可以看到4个文件
他们的后缀分别是wxml
wxss
js
json
wxml
可以理解成html
,同理wxss
到css
每个文件夹下都是这四种格式,我们就不需要对文件的样式和javaScript
进行引用了,小程序会自动引用
根目录 app.json
下"pages":[ "pages/index/index", "pages/logs/logs" ],
里面的顺序表示我们打开页面的显示顺序,比如我们现在是"pages/index/index"
位于"pages/logs/logs"
之上,就是我们用户在左边模拟器
中看到的界面,如果我将这两个位置进行互换,就可以看到展示在我们模拟器
首页的就是日志了
小技巧:如果你想创建页面,可以在page
里面添加一个路径(只在微信开发者工具里面添加菜有效果),那么微信开发者工具就会帮我们自动生成文件
而"window":{ "backgroundTextStyle":"light", "navigationBarBackgroundColor": "#fff", "navigationBarTitleText": "WeChat", "navigationBarTextStyle":"black" }
中,backgroundTextStyle
是窗口的背景色,只能设置成light
或dark
navigationBarBackgroundColor
是窗口导航栏的背景颜色
我这里将其改成红色(只支持16进制),如下
如果将其改成red
,是不起作用的,还是默认的白色navigationBarTitleText
则是窗口导航栏的标题
如上图,是WeChat
,显示的便是WeChar
,可以更改navigationBarTextStyle
则是窗口导航栏标题的字体颜色,只支持white
和black