0.域名接口设置
- 设置项目中的appId以及合法域名
- 后台数据，采用api工厂 api工厂
使用：\
- 前往后台管理注册账户信息并登录
- 登录后台，左侧菜单 “工厂设置” --> “数据克隆” --> “将别人的数据克隆给我”
- 对方商户ID填写 951
- 点击 “立即克隆” ，然后退出后台重新登录，然后在左侧菜单的商城管理便可以看到相关数据
进入到后台管理后，在首页可以查看自己的域名，初始域名为一串字符串，这样不好看的同时用着也不顺畅，可以修改为自己喜欢的字符。
- api工厂数据的使用 使用api工厂的域名拼接自己的子域名在加上接口地址，就可以访问数据了。
例如轮播图:api.it120.cc/nekohaFrey/…
在浏览器上查看数据:
1.自定义组件-search
- 新增组件
- 声明引用
1.1新增组件
1.2 引用组件
- 在相应的json中表示引用,引用组件名：引用组件路径
{
// 表示引用组件
"usingComponents": {
"SearchInput":"../../components/SearchInput/SearchInput"
}
}
- 相应wxml中表示使用
// 1. 组件wxml
<view class="search_input">
<!-- open-type="navigate" 跳转到非tabBar页面 -->
<navigator url="/pages/search/index" open-type="navigate">
搜索
</navigator>
</view>
// 2. 组件wxss
.search_input{
height: 90rpx;
padding: 10rpx;
background-color: var(--themeColor);
navigator{
height: 100%;
display: flex;
justify-content: center; //水平居中
align-items: center; // 垂直居中
background: #fff;
border-radius: 15rpx;
color:#666
}
}
效果：
2.轮播图
2.1 获取轮播图数据
index.js中,轮播图数据链接为api工厂的。
若要换成自己的，则是 api.it120.cc/xxxx（你的域名）/…
// pages/index/index.js
Page({
data: {
// 轮播图数组
swiperList:[]
},
// 页面开始加载 就会触发
onLoad: function(option){
// 1 发送异步请求获取轮播图数据
var reqTask = wx.request({
url: 'https://api.it120.cc/nekohaFrey/banner/list',
success: (result)=>{
// console.log(result)
this.setData({
swiperList:result.data.data // 给swiperList赋值
})
}
});
}
})
2.2 轮播图渲染
<view class="index_swiper">
<!--
1. swiper标签存在默认的宽度和高度 100% *150px
2. image标签也存在默认的宽度和高度 320px * 240px
3. 设计图片和轮播图
原图宽高 750 * 180
让图片的高度自行应 宽度等于100%
让swiper标签的高度 变成和图片的高一样即可
4.图片标签
mode属性 渲染模式
widthFix 让图片的标签宽高 和 图片标签的内容的宽高都等比例地发生变化
-->
<swiper autoplay indicator-dots circular>
<swiper-item wx:for="{{swiperList}}" wx:key="id">
<navigator>
<image mode="widthFix" src="{{item.picUrl}}"></image>
</navigator>
</swiper-item>
</swiper>
</view>
2.3 轮播图样式
.index_swiper{
swiper{
width: 750rpx;
height: 180rpx;
image{
width: 100%;
}
}
}
