hello,项目都会新建了么,小程序页面都摸熟悉了的话我们就开始做一个小程序上手练一练吧!
我们接下来要做的就是做一个简易豆瓣电影小程序。
既然要做我们就需要做好产品分析详细的来了解一下下究竟需要我们实现那些东西。
主界面由顶部导航栏,头部搜索栏,以及下面的三种影视列表组成。
更多页面和主页面的差不多,唯一的区别就是下面是单一的影视类别的影视,点击主页面的更多,就可以跳转到这里。
详情页面石油顶部的导航栏,下面的影视介绍,中部的豆瓣标签以及底部的评论组成。
详情页面石油顶部的导航栏,以及一个搜索框,还有页面下部的影视搜索列表组成。
详情页面石油顶部的导航栏,以及一个搜索框,还有下面的历史记录组成。
我们总览了所有的页面,我们现在可以进入到我们的新建小项目中为这几个项目新建一下各自的page页面,对应一下基本的项目构架。
我们接下来可以实现一下豆瓣中通用的部分:
既然说到搜索框那我们就不得不提出组件这个概念,组件是啥组件就像是你们家的火锅底料,他可以每次用每次取,不用每一次都自己去重新配置配方,哎我又想吃火锅了,也有点儿想我们程序中的函数,哪儿用到它就到哪引用。
话不多说开干!
首先创建一个总的文件夹:用来放组件我这里管它叫component位置一般在二级夹。
右击这个组件文件夹然后选择新建component起个合适的名字我这里的组件管它叫searchbar。
就会生成一些基本文件
首先我们写出wxml基本样式:
<view class='searchbar'>
<navigator class='search-navigator'>navigator>
<view class='search-input-group'>
<input class='search-input' placeholder="搜一搜" >input>
view>
view>
.searchbar{
background-color: #41be57;
padding: 15rpx;
}
.search-navigator{
width: 100%;
height: 40px;
border-radius:10rpx;
background-color: #ffffff;
/* 转为64位颜色,可以节约内存空间 */
/* 只有小图可以转!! */
background-image: url("data:image/png;base64,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");
background-position: center center;
background-repeat: no-repeat;
background-size: 8%;
}
.search-input-group{
width: 100%;
height: 60rpx;
background-color: #fff;
border-radius: 10rpx;
padding: 10rpx 20rpx;
box-sizing: border-box;
}
.search-input{
min-height: 40rpx;
height: 40rpx;
font-size: 14px;
}
巨多的哪一行是我将图片转成了base64格式的代码,为了节省小程序占用空间。
<view class='searchbar'>
<navigator wx:if="{
{isnavigator}}" url='/pages/search/search' class='search-navigator'>navigator>
<view wx:else class='search-input-group'>
<input class='search-input' placeholder="搜一搜" bindinput="onInputEvent">input>
view>
view>
// componests/searchbar/searchbar.js
Component({
/**
* 组件的属性列表
*/
properties: {
isnavigator:{
type:Boolean,
value:false
}
},
/**
* 组件的初始数据
*/
data: {
},
/**
* 组件的方法列表
*/
methods: {
onInputEvent:function(event){
// console.log(event);
// 传参
var value = event.detail.value;
var detail = {
"value":value};
var options = {
};
// triggerevent(”event“)触发某一个事件
this.triggerEvent("searchinput",detail,options);
}
}
})
{
"component": true,
"usingComponents": {
}
}
现在就可以展示一下我们组件啦!
我们在需要它的地方,给引用一下:
{
"usingComponents": {
"searchbar": "/componests/searchbar/searchbar"
}
}
wxml中写标识:
<searchbar isnavigator="{
{true}}">searchbar>
好啦有问题的话,评论区留言,关注aFang每天会有很多的磕和你唠,哈哈哈哈!!!