项目搭建
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)把这个域名添加到小程序的后台
你要登录 在开发中===》开发设置中 （有图）
原文地址：https://www.cnblogs.com/IwishIcould/p/12081515.html