小程序项目实战-第二篇

全栈开发日记

发布于 2022-05-13 14:35:52

3770

发布于 2022-05-13 14:35:52

文章被收录于专栏：全栈开发日记

本篇目录：

初始化样式设置主题颜色添加自定义组件搜索框组件案例

初始化样式

在小程序wxss中没有全局选择器，如：*{padding:0;}是错误的。

在app.wxss中做代码样式初始化处理：

view,view,text,swiper,swiper-item,image{
    padding: 0;
    margin: 0;
    box-sizing: border-box;
}

设置主题颜色

在app.wxss中定义主题颜色：

/*主题颜色 通过变量来实现*/
page{
    /*定义主题颜色*/
    --themeColor:#eb4450;
}

在页面.wxss中使用主题颜色：

/*使用主题颜色*/
view{
  color:var(--themeColor);
}

添加自定义组件

在小程序项目根目录下创建components目录，用来存放组件。

① 在components文件夹中创建组件文件夹。

② 在要用到该自定义组件的页面json文件中声明组件：

Sinput是我创建的自定义组件名称，后面是自定义组件的位置。

"usingComponents": {
    "Sinput":"../../components/Sinput/Sinput"
},

③ 在wxml中直接使用该自定义组件。

搜索框组件案例

wxml：

<view class="serch_input">
  <navigator url="../../pages/search/index" open-type="navigate">搜索</navigator>
</view>

wxss：

.serch_input {
  height: 90rpx;
  padding: 10rpx;
  background-color: var(--themeColor);
}
.serch_input navigator {
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: #fff;
  border-radius: 15rpx;
  color: #666;
}

本文参与腾讯云自媒体同步曝光计划，分享自微信公众号。

原始发表：2021-02-07，如有侵权请联系 cloudcommunity@tencent.com 删除

小程序