现在正式开始编码啦!~
我的IDE版本:
首先,新建一个小程序项目,然后创建所需要的文件以及目录:
然后在index.wxml中编写小程序的页面骨架:
<!-- index.wxml是编写小程序骨架的文件,相当于HTML -->
<!-- <view>相当于HTML中的<div> -->
<view>
<image style='width:200rpx;height:200rpx;' src='/images/tx.jpg'></image>
<text>Hello, Mini Program</text>
<view>
<!-- 只有被<text>组件包起来的文字才能在客户端被长按选中 -->
<text>加油!!开启小程序之旅吧!</text>
</view>
</view>
但是,一开始就出错了???
对哦,目录和文件都是我自己创建的,没有在app.json中配置页面路径信息,无法找到页面。
//app.json 这个文件里面不要随意加注释,会报错
{
"pages": [
"pages/index/index"
]
}
然后才后知后觉是因为我没有对logs进行配置,不过好像logs文件没用到,我就把它删了(删了之后可能会出现没法保存的情况,重启IDE即可),这时候至少不报这个错了。
{
"pages": [
"pages/index/index"
],
"window":{
"navigationBarBackgroundColor": "#f5f4a7"
}
}
但是,出现了新的错误:没有再index.js中调用Page()
怎么办呢?我是初学者呀,我咋知道Page()里面要写啥?还有为什么一定要有page()呢?
莫慌!我们先看看 参考文档 注册页面 Page 这里怎么写的:
上一节学习中也提到过:在程序与页面这一小节里面,有这样一段话:
你可以观察到
pages/logs/logs
下其实是包括了4种文件的,微信客户端会先根据logs.json
配置生成一个界面,顶部的颜色和文字你都可以在这个json
文件里边定义好。紧接着客户端就会装载这个页面的WXML
结构和WXSS
样式。最后客户端会装载logs.js
,你可以看到logs.js
的大体内容就是:Page({ data: { // 参与页面渲染的数据 logs: [] }, onLoad: function () { // 页面渲染后 执行 } })
Page
是一个页面构造器,这个构造器就生成了一个页面。在生成页面的时候,小程序框架会把data
数据和index.wxml
一起渲染出最终的结构,于是就得到了你看到的小程序的样子。在渲染完界面之后,页面实例就会收到一个
onLoad
的回调,你可以在这个回调处理你的逻辑。
我们说过,logs和index其实是两个不同的页面,logs.js和index.js对它们对应的页面的作用也是一样的。
微信客户端通过app.json中的"pages"配置项找到pages/index/index之后,会先根据index.json生成一个界面(这还不是我们最后要渲染出来的页面!),接着装载wxml和wxss文件,最后装载index.js,而index.js里面的Page({})是一个页面构造器,这个构造器生成一个页面,所以每一个页面的js文件里面都应该有一个这样的页面构造器,才能生成对应的小程序页面。
那么,在index.js里面可以写那些内容呢?又是求助于帮助文档的时候了!
index.js是页面脚本文件,在这里放监听并处理页面的生命周期、获取小程序实例、声明并处理数据、响应页面交互事件等的脚本。
这些内容我们还没用到,看一下QuickStart中这里的代码是怎样的:
//index.js
//获取应用实例
const app = getApp()
Page({
data: {
motto: 'Hello World',
userInfo: {},
hasUserInfo: false,
canIUse: wx.canIUse('button.open-type.getUserInfo')
},
//事件处理函数
bindViewTap: function() {
wx.navigateTo({
url: '../logs/logs'
})
},
onLoad: function () {
if (app.globalData.userInfo) {
this.setData({
userInfo: app.globalData.userInfo,
hasUserInfo: true
})
} else if (this.data.canIUse){
// 由于 getUserInfo 是网络请求,可能会在 Page.onLoad 之后才返回
// 所以此处加入 callback 以防止这种情况
app.userInfoReadyCallback = res => {
this.setData({
userInfo: res.userInfo,
hasUserInfo: true
})
}
} else {
// 在没有 open-type=getUserInfo 版本的兼容处理
wx.getUserInfo({
success: res => {
app.globalData.userInfo = res.userInfo
this.setData({
userInfo: res.userInfo,
hasUserInfo: true
})
}
})
}
},
getUserInfo: function(e) {
console.log(e)
app.globalData.userInfo = e.detail.userInfo
this.setData({
userInfo: e.detail.userInfo,
hasUserInfo: true
})
}
})
去掉里面的相关配置和应用实例的获取(const app = getApp())就剩下这个了:
//index.js
Page({
})
不报错,然后就出来如下界面啦~
将样式style='width:200rpx;height:200rpx;margin-top:0rpx;'移植到index.wxss文件中:
.user_avatar{
height: 200rpx;
width: 200rpx;
margin-top: 160rpx;
}
注意:当wxml的style属性中定义的样式和wxss文件中定义的样式发生冲突时,以wxml的style属性中定义的为准。
<!-- wxml是编写小程序骨架的文件,相当于HTML -->
<!-- <view>相当于HTML中的<div> -->
<view>
<image src='/images/tx.jpg' class='user_avatar'></image>
<text>Hello, Mini Program</text>
<view>
<!-- 只有被<text>组件包起来的文字才能在客户端被长按选中 -->
<text>加油!!开启小程序之旅吧!</text>
</view>
</view>
.user_avatar{
height: 200rpx;
width: 200rpx;
margin-top: 160rpx;
}
我们知道在html中要引入CSS和JS的文件路径,才能找到对应的文件,但是在wxml中,无需引用wxss文件,因为在app.json中已经配置过页面路径,在这里之所以没有写后缀名是因为框架会自动去寻找对应位置的
.json
, .js
, .wxml
, .wxss
四个文件进行处理,故,直接在wxss
文件中直接引用在wxml中的类选择器名即可为之定义相应的样式。
接下来我们想要让图片和两行文字分别垂直排列,那么就要先把它们放在弹性容器里面(display:flex 具体见菜鸟教程中关于CSS3弹性盒子的介绍),然后让他们垂直排列(flex-direction:column)
三者已经乖乖地排成一列了,接下来就让它们水平居中(align-items:center,通常垂直居中是通过设置行高line-height实现的)
接下来就是改变一下图片、字体的样式、设置行高啦,这些都和html+css所差无几,就不一一介绍,直接贴代码:(align-items:center是居中对齐弹性盒子各项,text-align:center是设置文字书水平居中 )
//index.wxml
<!-- wxml是编写小程序骨架的文件,相当于HTML -->
<!-- <view>相当于HTML中的<div> -->
<view class='container'>
<image src='/images/tx.jpg' class='user_avatar'></image>
<text class='say_hello'>Hello, <text class='user_name'>Mini Program</text></text>
<view class='encourage_container'>
<!-- 只有被<text>组件包起来的文字才能在客户端被长按选中 -->
<text class='encourage'>开启小程序之旅</text>
</view>
</view>
//index.wxss
.container{
display: flex;
flex-direction: column;
align-items: center;
}
.user_avatar{
height: 200rpx;
width: 200rpx;
margin-top: 160rpx;
border-radius: 50%;
}
.say_hello{
font-size: 32rpx;
font-weight: bold;
margin-top: 80rpx;
}
.user_name{
color: red;
}
.encourage_container{
border: 1px solid #405f80;
width: 200rpx;
height: 80rpx;
border-radius: 5px;
text-align: center;
margin-top: 120rpx;
}
.encourage{
font-size: 22rpx;
font-weight: bold;
}
//app.json
{
"pages": [
"pages/index/index"
]
}
为整体页面设置一个背景色:但我们为container设置背景色时会发现并不能实现整个页面覆盖,
这是因为我们并没有为container设置过宽高,这时候的解决方法有两个:
1、为container设置宽高,如iPhone6下设置height: 667px;这就可以解决这个问题,但是我们不可能要求所有用户都用iphone6啊,换一种设备同样会出现这个问题,所以这种方法不够灵活!但是,对container设置height:100%也是没有用。
2、我们找到Wxml,可以发现小程序默认为我们的程序加上了<page>组件,
也就是说,<page>才是真正的顶级容器,我们同时为container和page设置height:100%看看会怎样:
很好,完美的解决了这个问题!但是导航栏的黑色太突兀了,不想要怎么办呢?通过上一节的学习我们知道app.json中window配置项是用于设置小程序的状态栏、导航条、标题、窗口背景色的,
我们试一下为它设置同样的背景色:
最后呈现出来的页面效果如下:
至此,启动页面就做完啦!
参考资料:
小程序API文档:https://developers.weixin.qq.com/miniprogram/dev/api/
下一篇:新闻列表页面的制作(列表渲染)