小程序之使用阿里字体图标定义主题的颜色控制首页标题的样式如何使用组件水平居中和垂直居中的方式 H5 关于上线后，

项目搭建

1==> 需要创建的文件夹

styles 存放公共的样式

components 存放组件

lib第三方库的

utils 自己的帮助库

reques 自己的接口

2==》如何快速创建页面

在app.json中写好页面路径。直接保存，就会自动生成文件

"pages/good_lis/good_lis",

"pages/cart/cart"

3==》如何使用阿里字体图标

将网址(生成的http://at.alicdn.com/t/font_1576796_281fgtvnbhl.css)在浏览器中打开，

然后将代码复制到 styles下的 iconfont.wxss文件下没有iconfont.wxss要新建哈

在app.wxss引入

@import "./styles/iconfont.wxss";

使用如下

<text class="iconfont icon-che"></text>

注意要有 iconfont

我觉得还可以直接使用在线的地址不需要在将在线的地址的内容复制下来

4===》搭建tabBar你以前搭建过这里就步在搭建了

5==》清楚默认样式

page,view,text,swiper,swiper-item, image,navigator {

padding:0;

margin:0;

box-sizing:border-box;

}

因为小程序不支持

*通配符

6==》如何在微信中定义主题的颜色

主题的颜色通过变量来控制

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

page{

--theneColor:#eb4450;

}

在XXX.wxss中使用 usethemcolor是你定义的类

.usethemcolor {

color: var(--theneColor);

}

7==》在app.wxss中

统一定义字体的大小

page {

/* 1px=2rpx 2px=28rpx */

font-size: 28rpx;

}

8==》控制首页标题的样式

"window": {

"backgroundTextStyle": "light", //字体

"navigationBarBackgroundColor": "#eb4450",//背景色

"navigationBarTitleText": "快乐购物",//文本字体

"navigationBarTextStyle": "black"

},

09==》如何使用组件

创建组件

当你把组件创建好了之后，

在app.json中会有组件对应的路径哈如下:

"components/searchinput/searchinput"

在某个页面中引用组件

XXX.json中配置一下 key:value的形式

"usingComponents": {

"searchinput":"../../components/searchinput/searchinput"

}

使用

10==》快捷键的使用

view.viewbox 回车出现

11==》水平居中和垂直居中的方式 H5(重要哈)

height: 100%;

display: flex;

justify-content: center;/水平居中/

align-items: center; /垂直居中/

12==》组件搜索框

<view class="search_input">

  <!-- navigator 必须要有url  open-Type="navigator"跳转到非tarBar页面 -->

  <navigator class="navigator_input" url="/pages/search/search" open-Type="navigator">

    搜索

  </navigator>

</view>

/* 搜索框的样式 */

.search_input {

height: 90rpx;

padding: 10rpx;

background: var(--theneColor);

}

.search_input .navigator_input {

height: 100%;

display: flex;

justify-content: center;

/水平居中/

align-items: center;

/垂直居中/

background-color: #fff;

border-radius: 14rpx;

}

13==>关于上线后，

wx.requese中url的要求

1)必须是https开头的

2)把这个域名添加到小程序的后台

你要登录在开发中===》开发设置中（有图）