一.创建小程序
参考微信小程序开发零基础——必须得了解的入门知识(一)
新建
二.形成空白文件
点击打开目录,删除除了project.config.json以外所有文件
新建’app.json’接下来我们在app.json中写入配置
{}
保存,我们可以看到编译器报错,因为目前文件为空
三.小程序页面路径配置
都是在英文输入法中输入
首先在app.json中写入
{
"pages": [
"pages/index/index"
]
}
第一个pages项目里面有哪些页面
第二个pages指的是
保存,一定要先保存要不然建好回车没有反应
右击pages新建目录,命名为index
在index下新建pages命名为index
现在微信小程序改版了,需要在pages下新建目录才能新建页面
现在可以看到开发者工具以及自动的在我们的pages文件夹下的index目录中新建index页面路径,放入pages数组中
在 app.json
中,pages
数组是必填的。它规定小程序中所有页面的地址,同时规定了小程序启动时的首页,就是 pages
数组的首位所指的页面。
当 pages
成功配置后,小程序就可以正常运行了(新建页面文件后,小程序已经正常运行无报错了)。但如果想要一些个性化配置,我们依然可以继续修改 app.json
。在 app.json
中,pages
数组是必填的。它规定小程序中所有页面的地址,同时规定了小程序启动时的首页,就是 pages
数组的首位所指的页面。
四.修改小程序页面
代码如下
{
"pages": [
"pages/index/index"
],
"window":{
"backgroundTextStyle": "light",
"navigationBarBackgroundColor": "#ff0000",
"navigationBarTitleText": "周偏偏",
"navigationBarTextStyle": "white"
}
}
是不是看到变化了!
在app.json中,window用于设置小程序的状态栏,导航条,标题,窗口,背景色。下面归类一下,有兴趣的小朋友可以挨个试一下
五.与WXML玩耍
插入文字
当我们打开index文件夹下面的index.wxml文件,可以看到开发者工具在自动生成页面的时候,默认生成代码如下。
<!--pages/index/index.wxml-->
<text>pages/index/index.wxml</text>
第一行是注释,对代码解释说明。计算机执行程序会自动跳过注释编译。第二行代码前后都是由尖括号阔起来部分中间即是pages/index/index.wxml
当然,要是我们不喜欢就加点个性化内容趴
把中间改成hello China!保存运行
<text>Hello China</text>
是不是与这个红还挺搭!
在小程序中,
插入图片
下面我们在小程序中插入一张图片
首先在index页面下打开目录
新建image文件夹,根目录下创建
拖一张自己喜欢的图片进去,再回到开发者工具就回看到文件夹和图片都出现在目录下,与根目录平行,一定要注意别建错文件夹。
接下来我们在wxml中插入代码
<image src='/image/a.jpg'></image>
效果如下:
与 < text > 一样, 也是小程序的一个视觉组件,它代表在小程序里插入一张图片。
分割代码
在开发过程中把屏幕元素分割成不同部分,用独立的样式代码提高编码效率
例如我们用对元素部分进行区分
这样我们就可以统一处理图片的样式和其他操作。