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