介绍
创建项目+目录文件结构
实现一个单页面的小程序
或者把样式写在wxss中
页面配置初探
要做出来的效果图：
怎么动态的改变导航栏的文字？
text,view,image组件
实现UI设计图中的样式及布局效果
传统实现:
但是传统方式布局目标的实现属性赋值非常分散；严重依赖页面结构与内容实际大小
如果此时又多个text标签呢，那个margin-bottom的值就不是那么合适了，要重新写
弹性盒子：
弹性盒子布局相关的wxss属性赋值比较统一
弹性盒子布局方式灵活
没有去计算间隔的大小，实现的是人工布局，比较灵活
让元素大小适配不同宽度屏幕
.about-banner{
width:375rpx;
height: 375rpx;
border-radius: 50%;
}
新增每周推荐weekly页并快速调试
<!--pages/weekly/weekly.wxml-->
<view class="container">
<text>本周推荐</text>
<image src="/images/jf.jpg"></image>
<text>教父</text>
<text>点评：最精彩的剧本，最真实的黑帮电影</text>
</view>
使用navigator组件–从about页跳到weekly页
open-type默认值navigate，可返回的
redirect 不可以返回的
注意：text标签只能识别纯文本，其他都无效/* pages/about/about.wxss */
/* .container{
background-color: #eee;
height: 100vh;
text-align: center;
}
text{
display: block;
}
text,image{
margin-bottom: 40px;
} */
.container{
background-color: #eee;
height: 100vh;display: flex;
flex-direction: column;justify-content: space-around;
align-items: center;}
.about-banner{
width:375rpx;
height: 375rpx;
border-radius: 50%;
}
.nav-hover{
color:red;
}
.nav-default{
color:green;
}
<!--pages/about/about.wxml-->
<view class="container">
<image class="about-banner"src="/images/simbasong.jpg"></image>
<text style="font-weight:bold;font-size:60rpx;">电影周周看</text>
<view>
<text>我</text>
<navigator style='display: inline;' url='/pages/weekly/weekly' open-type="navigate" class="nav-dafault" hover-class="nav-hover">每周推荐</navigator>
<text>一部好片</text>
</view><text>我的wechat是：weixin.com/qxy</text>
<text>this is boiling island</text>
<text>i am EDA</text>
<text>Welcome our country</text>
</view>
但是结果navigator默认的颜色为绿色显示了，但是点击后成没有出现红色
因为样式选择器的一样的时候，就越在后面优先级越高
所以上面的hover-default优先级高，所以点击后还是会显示绿色而不是红色
下面把nav-hover放在最后面，最后点击“每周推荐”字体会变成红色而且跳入weekly页面
配置tabbar–对若干一级页面的入口链接
app.json:{
"pages":[
"pages/about/about",
"pages/weekly/weekly"],
"window":{
"backgroundTextStyle":"light",
"navigationBarBackgroundColor": "#fff",
"navigationBarTitleText": "Weixin",
"navigationBarTextStyle":"black"
},
"tabBar": {
"color": "#000000",
"selectedColor": "#66CDAA",
"borderStyle": "black",
"backgroundColor": "#F0F8FF","list": [
{
"pagePath": "pages/weekly/weekly",
"text": "每周推荐",
"iconPath": "images/tabbar/weekly.png",
"selectedIconPath": "images/tabbar/weekly-selected.png"
},
{
"pagePath": "pages/about/about",
"text": "关于",
"iconPath": "images/tabbar/about.png",
"selectedIconPath": "images/tabbar/about-selected.png"
}
]
},
"style": "v2",
"sitemapLocation": "sitemap.json"
}
但是原来的about 页面的元素点击无效
解决方法：
改下navigator的open-type为switchTab
配置全局导航栏样式
数据绑定–
也就是每一次需要手动修改WXML的值
在AppData可以看见：
<!--pages/weekly/weekly.wxml-->
<view class="container">
<text>本周推荐</text>
<image src="{{thisWeekMovie.imagePath}}"></image>
<text>{{thisWeekMovie.name}}</text>
<text>{{thisWeekMovie.comment}}</text>
<text>数目为:{{count}}</text>
<text>分数为:{{score}}</text>
<text>{{(score>60)?"及格":"不及格"}}</text>
<text>{{score+count}}</text>
</view>
// pages/weekly/weekly.js
Page({/**
* 页面的初始数据
*/
data: {
thisWeekMovie:{
name:"教父",
comment:"最精彩的剧本，最真实的黑帮电影。",
imagePath:"/images/icon/jf.jpg"
},
count:24,
score:36
},/**
* 生命周期函数--监听页面加载
*/
onLoad: function (options) {},
/**
* 生命周期函数--监听页面初次渲染完成
*/
onReady: function () {},
/**
* 生命周期函数--监听页面显示
*/
onShow: function () {},
/**
* 生命周期函数--监听页面隐藏
*/
onHide: function () {},
/**
* 生命周期函数--监听页面卸载
*/
onUnload: function () {},
/**
* 页面相关事件处理函数--监听用户下拉动作
*/
onPullDownRefresh: function () {},
/**
* 页面上拉触底事件的处理函数
*/
onReachBottom: function () {},
/**
* 用户点击右上角分享
*/
onShareAppMessage: function () {}
})
weekly.json
{
"usingComponents": {},
"navigationBarTitleText": "每周推荐"
}
原创：https://www.panoramacn.com
源码网提供WordPress源码,帝国CMS源码discuz源码,微信小程序,小说源码,杰奇源码,thinkphp源码,ecshop模板源码,微擎模板源码,dede源码,织梦源码等。专业搭建小说网站,小说程序,杰奇系列,微信小说系列,app系列小说
免责声明,若由于商用引起版权纠纷,一切责任均由使用者承担。
您必须遵守我们的协议，如果您下载了该资源行为将被视为对《免责声明》全部内容的认可-> 联系客服 投诉资源www.panoramacn.com资源全部来自互联网收集，仅供用于学习和交流，请勿用于商业用途。如有侵权、不妥之处，请联系站长并出示版权证明以便删除。 敬请谅解！ 侵权删帖/违法举报/投稿等事物联系邮箱：2640602276@qq.com未经允许不得转载：书荒源码源码网每日更新网站源码模板！ » 1|weekly movie
关注我们小说电影免费看关注我们，获取更多的全网素材资源，有趣有料！120000+人已关注
评论抢沙发