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

Posted 2020-11-23 平凡是最美荡气回肠

项目搭建

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";

使用如下

注意要有 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)把这个域名添加到小程序的后台
你要登录 在开发中===》开发设置中 （有图）