微信小程序开发——基础目录、欢迎页面的创建(电影小程序)的开发教程: 0、效果图展示:
![这里写图片描述](https://static.oschina.net/uploads/img/201708/11094625_4FNR.jpg) 1、目录结构讲解: ![这里写图片描述](https://static.oschina.net/uploads/img/201708/11094625_9LHH.jpg) 微信小程序有四种文件类型:
- *.wxml
- *.wxss
- *.js
- *.json
wxml:类似网页里的html页面; wxss:类似于网页里的css样式; js:js文件,用来定义函数方法等; json:配置页面属性,例如标题栏;
上图中的app.js app.json app.wxss 三个文件的文件名是固定的,微信官方定义好的,不可以修改文件名,也不可缺少这三个文件。 2、注意事项: 页面文件夹里的wxml、 wxss、 js、 json文件的文件名必须相同,文件夹名字不必和里面的文件名相同,如图
![这里写图片描述](https://static.oschina.net/uploads/img/201708/11094625_6Djj.jpg) 微信开发者者工具下载地址:官方下载地址 先看下最后的效果图:
![这里写图片描述](https://static.oschina.net/uploads/img/201708/11094625_UZgD.jpg) 首先打开开发工具,创建quick start项目,简单的修改一下。
![这里写图片描述](https://static.oschina.net/uploads/img/201708/11094625_odaf.jpg)
- 把Index文件夹重命名为welcome;
- 底部的hello world改为一个类似于按钮的样式;
- 添加背景颜色; 修改顶部样式;
按钮的实现: welcome.wxml <view class="usermotto">
<text class="btn">开启小程序之旅</text>
</view>
welcome.wxss .usermotto {
margin-top: 200px;
border: 1px solid #405f80;
width: 200rpx;
height: 80rpx;
text-align: center;
border-radius: 5px;
}
.btn{
font-size: 22rpx;
font-family: MicroSoft Yahei;
font-weight: bold;
line-height: 80rpx;
}
背景颜色的设置: 注意:在最外部的view设置宽高百分百,添加背景颜色是无效的。因为微信默认外面还有一层page。
所以需要这样写: page{
height: 100%;
background: #b3d4db;
}
顶部设置: app.jason {
"pages":[
"pages/welcome/welcome"
],
"window":{
"backgroundTextStyle":"light",
"navigationBarBackgroundColor": "#b3d4db",
"navigationBarTitleText": "欢迎",
"navigationBarTextStyle":"black"
}
}
|
转载于:https://my.oschina.net/u/3396785/blog/1506303