聊城做网站的公司教程,wordpress h1标签,办公室效果图,wordpress get var前置知识
1、配置插件
微信小程序 基础模板引入sass的两种方法_微信小程序使用sass-CSDN博客
之后在对应页面里新建一个scss文件#xff0c;写css 2、注册小程序#xff0c;有个自己的appid#xff0c;不用测试号了
5.1.注册小程序账号获取appid及个人和企业版差异_哔哩…前置知识
1、配置插件
微信小程序 基础模板引入sass的两种方法_微信小程序使用sass-CSDN博客
之后在对应页面里新建一个scss文件写css 2、注册小程序有个自己的appid不用测试号了
5.1.注册小程序账号获取appid及个人和企业版差异_哔哩哔哩_bilibili
微信公众平台
3、微信小程序开发学习基础-CSDN博客
4. Promise用法
异步相关看完了有点蒙不看也可以往下进行但是会不知道原理
ES6 Promise的用法async/await异步处理同步化 - 哔哩哔哩
5. 图 6. 第三方UI库使用
用的这个Vant Weapp - 轻量、可靠的小程序 UI 组件库
安装https://vant-contrib.gitee.io/vant-weapp/#/quickstart
5.9.第三方UI组件库vant weapp和TDesign_哔哩哔哩_bilibili
以icon为例app.json导入组件直接用
usingComponents: {van-icon: vant/weapp/icon/index}
直接用 van-icon namecontact-o/ ----- 上手干项目 ----- 项目所需材料https://gitee.com/qingnian8/weixinNative
0. 先写个网络请求接口之后用
建文件 /utils/request.js
第一个网址访问超限换第二个但是第二个是测试用的脏数据
const baseURL https://tea.qingnian8.com;
// const baseURL https://www.fastmock.site/mock/13998300dc7574018c16109b0ef56a56/xzs;export function request(params){let dataObj params.data || {};let headerObj { content-type: application/json}return new Promise((resolve,reject){wx.request({url: baseURL params.url,method:params.method || GET,data:dataObj,header:headerObj,success:res{if(res.data.errCode!0){reject(res.data);wx.showToast({title: res.data.errMsg,mask:true,icon:error})return;}resolve(res.data)},fail:err{reject(err)}})})
}
1. app.*设置全局
设置全局最常用的view样式使内填充padding不向外扩充而是向内扩充保证全局样式的不变
在app.wxss中设置view样式之后在哪里用都不会改变了
view,text{/* 可以使padding往内扩展使原有定义宽度不变 */box-sizing: border-box;
}
定义全局配色其实还不够灵活有的json文件需要用颜色无法导入变量
page{--themeColor:#bda066;--globalColor:#1a1b1c;--focusColor:#4c4d4e;--descColor:#7e8081;--greyColor:#8e8e8e;--subColor:#b1b2b3;--lightColor:#e4e4e4;--globalBgColor1:#e3e4e5;--globalBgColor2:#f6f7f8;--globalBgColor3:#ffffff;
}
json定义全局上面的栏 window: {// 背景色json不能写注释小学生都知道navigationBarBackgroundColor: #333333,// 文字颜色navigationBarTextStyle: white,// 默认文本navigationBarTitleText: yuange6666},
json中的log页面没有用到删掉
底部导航栏 app.json
tabBar: {// 默认颜色这里就用不了全局颜色配置了所以全局配置不是哪里都能用color: #4c4d4e,// 选中颜色selectedColor: #bda066,list: [{text: 首页,pagePath: pages/one/one,iconPath: static/images/home.png,selectedIconPath: static/images/home-fill.png},{text: 分类,pagePath: pages/classify/classify,iconPath: /static/images/all.png,selectedIconPath: /static/images/all-fill.png},{text: 新闻,pagePath: pages/news/news,iconPath: /static/images/news.png,selectedIconPath: /static/images/news-fill.png}]},
2. 顶部全局组件 新建全局部件/components/xzs/xzs.* 在json中引入全局组件因为是全局所以到app.json中引入
usingComponents: {xzs:/components/xzs/xzs-header}
wxml scss
.header {height: 120rpx;border: 1px solid var(--themeColor);display: flex;justify-content: space-between;align-items: center;padding: 0 30rpx 0 30rpx;.logo{height: 90rpx;.pic{height: 100%;}}// 这么直接写一个pic也没有毛病但是啥叫好的编程习惯啊~// .pic{// height: 90rpx;// }
}display: flex;是CSS的一个属性用于将容器设置为弹性盒子flexbox布局。这种布局模型非常适合于创建响应式布局和复杂的布局结构。当一个元素应用了display: flex;属性后该元素会变成一个弹性容器flex container。
其直接子元素会变成弹性项目flex items。
弹性容器有多个属性可以用来调整其子项目如何排列、对齐和分布空间例如flex-direction: 决定子项目的主轴方向。
flex-wrap: 决定子项目是否应该换行。
align-items, align-self: 用于决定子项目在交叉轴上的对齐方式。
justify-content: 用于决定子项目在主轴上的对齐方式。
在别的页面使用时直接引入
xzs/xzs
3. 首页one.* 3.1 滑块 swiper | 微信开放文档
swiper-item | 微信开放文档 !-- 写成循环 --
view classbanner!-- 显示圆点、自动播放、间隔3000ms、循环、左边缩进 --swiper classswiper indicator-dotstrue autoplaytrue interval3000 circulartrue previous-margin30rpx!-- 4条数据 --swiper-item classswitem wx:for{{4}}image classpic src/static/images/banner{{index}}.jpg modeaspectFill //swiper-item/swiper
/view
3.2 滚动栏 view class scrollNav!-- 横向滑动启动 --scroll-view scroll-xtrue
// 这里的idx参数是用于第6章从首页到分类页跳转用navigator classitem wx:for{{chaArr}} wx:key_id url/pages/classify/classify?idx{{index}} open-typereLaunchimage classpic src{{item.icon}} mode /text classtxt{{item.classname}}/text/navigator/scroll-view
/view
.scrollNav{padding: 30rpx 30rpx 30rpx 30rpx;
}
.scrollNav scroll-view{/* 父级元素不换行 */white-space: nowrap;
}
.scrollNav scroll-view .item{// 转成行级块元素display: inline-block;padding: 0 25rpx;text-align: center;
}// 第一个和最后一个不要边距
.scrollNav scroll-view .item:first-child{padding-left: 0;
}
.scrollNav scroll-view .item:last-child{padding-right: 0;
}
.scrollNav scroll-view .item .pic{width: 100rpx;height: 100rpx;
}
.scrollNav scroll-view .item .txt{font-size: 32rpx;color: var(--globalColor);padding-top: 30rpx;
}
js获取导航栏项目获取的内容item如下 import {formatDate,formatNum} from ../../utils/common.js
import {listNav,listNews} from ../../api/apisdata: {chaArr: [],newsArr: []},onLoad(options) {this.getNavData()this.getNewsData()},getNavData() {// 下面封装的就是这个的Promise相关实现注释部分也能用// wx.request({// url: https://tea.qingnian8.com/nav/get,// method:POST,// header:{Content-Type:application/json},// success:res{// console.log(res);// this.setData({// chaArr:res.data.data// })// }// })listNav().then(res {// console.log(res)this.setData({chaArr: res.data})})},
其中listNav() 函数在/api/apis.js中写一个
import {request
} from ../utils/requestexport function listNav() {return request({url: /nav/get,method: POST})
} 3.3 简介栏 view classaboutview classpubTitleview classenintroduce/viewview classzh茶美文化简介/view!-- /* 这个线实际是一个view长方形 */ --view classline/view/viewview classcontentview classrow白茶素为茶中珍品历史悠久属中国六大茶类之一具有极高的收藏价值。巷子深茶美文化馆位于泉城济南是一家致力于弘扬茶美文化集白茶销售、品牌、体验、品鉴于一体的综合性企业。/viewview classrow巷子深茶美文化馆传承卓越与美共勉以中式传统风格为基础结合现代时尚格调将观赏性与实用性、商务与休闲、体验与收藏高度融合为顾客提供全新的体验式服务。茶舍环境优雅可以茶会友、修身养性、品鉴收藏感受白茶独特的文化魅力。/viewview classrow从白茶的栽培管理到茶窖存储每一款产品都诠释着我们追求完美的品质之心我们拥有最佳的仓储环境全系列白茶产品优质的客户服务致力于打造创新发展、诚信经营的新标杆。/view/view
/view
就是一个大背景灰色英文、中文、横线内容标题后面会复用所以把css写在了全局app.wxss中
.pubTitle{text-align: center;
}
当您在一个元素上设置 text-align: center; 时该元素中的所有文本内容包括子元素都会被居中对齐。
这意味着即使您没有明确指定 .line 的位置它也会被居中对齐因为它是一个文本内容的一部分。
.pubTitle .en{font-size: 86rpx;font-weight: 900;/* 在这里转大写妙啊 */text-transform: uppercase;color:var(--globalColor);opacity: 0.1;
}.pubTitle .zh{font-size: 56rpx;font-weight: 900;/* Y轴方向上向上回退堆叠英文 */transform: translateY(-60rpx);color: var(--globalColor);
}/* 这个线实际是一个view长方形 */
.pubTitle .line{width: 100rpx;height: 5rpx;background-color: var(--globalColor);opacity: 0.8;display: inline-block;transform: translateY(-40rpx);
}
3.4 资讯栏 大标题可以CV之前的每个条目需要写个公共组件
3.4.1 新闻条目公共组件
!-- 整个条目都是一个导航这个id是传递具体信息在5章中讲 --
navigator url/pages/new2/new2?id{{item._id}} classnews
!-- 左边的图片 --view classpicimage classimg src{{item.picurl}} modeaspectFill //view!-- 右边的文字块 --view classtxt!-- 上面的标题 --view classup{{item.title}}/view!-- 下面的三个小项 --view classdown!-- 1日期 --view classblockvan-icon namecalendar-o /text{{item.publish_date}}/text/view!-- 2浏览量 --view classblockvan-icon nameeye-o /text{{item.view_count}}/text/view!-- 3作者 --view classblockvan-icon namecontact-o/text{{item.author}}/text/view/view/view
/navigator
.news{/* 弹性盒模型左右布局当您将一个元素的 display 属性设置为 flex 时该元素会变成一个弹性容器其子元素会变成弹性项目。这允许您使用各种 Flexbox 属性来控制这些项目在容器中的布局和对齐。justify-content: space-between; 是这些属性之一。它决定了弹性项目在主轴默认为水平方向上的对齐方式。space-between 值意味着项目会均匀地分布在容器中第一个项目位于容器的起点最后一个项目位于容器的终点而其他项目则位于起点和终点之间的位置。 */display: flex;justify-content: space-between;padding-bottom: 30rpx;
}.news .pic{width: 220rpx;height: 150rpx;
}
.news .pic .img{width: 100%;height: 100%;
}.news .txt{width: 440rpx;height: 150rpx;/* 两端对齐justify 值会使文本两端对齐使得左右两边的空白间距相等。 */text-align: justify;display: flex;flex-direction: column;// 上下两端均匀分布justify-content: space-between;
}
.news .txt .up{line-height: 1.5em;color: var(--globalColor);font-size: 32rpx;// 结尾超出用省略号网上现用现CVtext-overflow: -o-ellipsis-lastline;overflow: hidden; /*溢出内容隐藏*/text-overflow: ellipsis;/*省略号表示*/display: -webkit-box;/*特别显示模式*/-webkit-line-clamp: 2;/*行数*/line-clamp: 2;-webkit-box-orient: vertical;
}
.news .txt .down{display: flex;justify-content: space-between;color: var(--descColor);
}
传参 /*** 组件的属性列表*/properties: {item:{type:Object,value:{title:默认标题,author:yuan}}}, 把公共组件引入全局app.json就能用了
usingComponents: {xzs-news:/components/xzs-news/xzs-news}
3.4.2 正页内容
这里传个item循环项就可以了内容都在公共组件内写好就是不好维护万一接口变量都变了
view classnewsview classpubTitleview classennews/viewview classzh资讯/viewview classline/view/viewview classcontentview classrow wx:for{{newsArr}}xzs-news item{{item}}/xzs-news/view/view
/view
获取循环列表在js内写函数 getNewsData() {listNews({limit: 3,size:0// hot: true}).then(res {// console.log(res);// 在函数中拿到数据直接格式化掉再传给前端res.data.forEach(item {item.view_count formatNum(item.view_count)})res.data.forEach(item {item.publish_date formatDate(item.publish_date)})this.setData({newsArr: res.data})})// wx.request({// url: https://tea.qingnian8.com/news/get,// method: POST,// header: {// Content-Type: application/json// },// data: {// limit: 3,// size: 0// // hot:true// },// success: res {// console.log(res);// res.data.data.forEach(item {// item.view_count formatNum(item.view_count)// })// res.data.data.forEach(item {// item.publish_date formatDate(item.publish_date)// })// this.setData({// newsArr: res.data.data// })// }// })}, listNews()写在apis.js中需要传递参数形参data
import {request
} from ../utils/requestexport function listNews(data) {return request({url: /news/get,method: POST,data})
}
3.5 页面尾版权信息、客服标志 每个页面都要用写个公共组件 3.5.1 版权
这个简单就是三行居中的字小学生都会
view classfooter view classrow解释权归远哥无限公司所有/viewview classrowCopyright © {{year}} 版权所有/viewview classrow上海市宝山区上大路99号上海大学/view
/view
.footer{padding: 50rpx 0rpx;text-align: center;background: var(--globalBgColor2);border-top: 1px solid var(--themeColor);color: var(--focusColor);font-size: 30rpx;line-height: 1.5em;
}
3.5.2 客服标志 结构最上面一个按钮透明的-下面一个客服图片-一个圆圈线做动画
view classkefubutton classbtn open-typecontactbtn/buttonimage src/static/images/kefu.png modeaspectFill classpic/view classline/view
/view
.kefu{width: 100rpx;height: 100rpx;background: var(--themeColor);// 卡位position: fixed;bottom: 100rpx;right: 60rpx;// 圆的border-radius: 50%;box-shadow: 0 0 20rpx rgba(189,160,102,0.8);z-index: 0;.btn{// position: relative;z-index: 2;opacity: 0.5; // 把这里改成按钮0透明border-radius: 10%; // 改完透明边框也就没用了border: 1px solid black;width: 100%;height: 100%;}.pic{position: absolute;top: 0;left: 0;bottom: 0;right: 0;z-index: 1;width: 90%;height: 90%;margin: 5%;}// 用于动画的线.line{width: 100%;height: 100%;border: 3px solid var(--themeColor);position: absolute;top: 0;left: 0;border-radius: 50%;// 动画name 类型 时间 循环animation: emit111 1.5s infinite;}
}// 动画定义
keyframes emit111{0%{}100%{border-width: 0px;opacity: 0;transform: scale(1.8);}
}
把公共组件引入全局app.json就能用了
usingComponents: {xzs-footer:/components/xzs-footer/xzs-footer}
4. 新闻列表页news.* /*** 页面的初始数据*/data: {newsArr: [],loading: true},
view classnews
!-- 大标题 --view classpubTitle/view
!-- 内容列表 --view classcontent/view
!-- 最后的显示 --view classloadOut/view
/view
.news{padding: 30rpx 30rpx;.loadOut{text-align: center;padding: 30rpx 0;.nodata{font-size: 30rpx;color: var(--descColor);}}
}
4.1 大标题
抄着3.3、3.4干什么愣啊
!-- 大标题 --view classpubTitleview classennews/viewview classzh资讯/viewview classline/view/view
4.2 内容列表 !-- 内容列表 --view classcontentview classrow wx:for{{newsArr}}xzs-news item{{item}}/xzs-news/view/view
4.2.1 获取列表逻辑
加载的时候要获取一次 /*** 生命周期函数--监听页面加载*/onLoad(options) {this.getNewsData();},
下拉触底要获取一次并且要显示加载中 /*** 页面上拉触底事件的处理函数*/onReachBottom() {// 要是判断不需要加载了就别再执行函数了退出吧if(this.data.loadingfalse) return;// 模拟一下0.5s加载不然太快了setTimeout(() {let arr this.data.newsArrthis.getNewsData()}, 500);}, 下拉刷新整个页面 /*** 页面相关事件处理函数--监听用户下拉动作*/onPullDownRefresh() {this.setData({// 要把新闻列表清空newsArr:[]})this.getNewsData()}, 所以获取函数这么写其中的格式化函数写在api中导入就行了时间戳格式化数字处理有手就能写 getNewsData() {// 先有loading后有天this.setData({loading: true})// 获取列表listNews({limit: 5,// 这个参数是隔断几个之后开始取数组列表已经有的就隔断往后继续取size: this.data.newsArr.length}).then(res {// 阻止那个下拉刷新的函数wx.stopPullDownRefresh()// 得到数据直接格式化掉再传给前端res.data.forEach(item {item.view_count formatNum(item.view_count)})res.data.forEach(item {item.publish_date formatDate(item.publish_date)})// 页面显示的事整个数组所以从空数组开始不断追加就行了this.setData({newsArr: this.data.newsArr.concat(res.data),})// console.log(res);// console.log(this.data.newsArr.length);// 如果数组长度后端返回的总数计数那就可以不用加载了if (this.data.newsArr.length res.total) {// console.log(no more);this.setData({loading: false})}})},// 在/api/apis.js中
export function listNews(data) {return request({url: /news/get,method: POST,data})
}
4.3 最后的显示 !-- 最后的显示 --view classloadOut!-- 加个判断 如果是loading为true显示加载的三方图标 --van-loading size24px color#3badff wx:if{{loading}}加载中.../van-loading!-- 否则就显示没有更多 --view classnodata wx:if{{!loading}}No more.../view/view
5. 新闻详情页new2.* 结构
view classdetail wx:else// 标题view classtitle/view// 文章信息view classinfo// 左边日期作者阅读量view classleft /view// 右边分享图标view classright/view/view// 内容view classcontent/view// 底部版权view classcopyright/view
/view
.detail{padding:30rpx;.title{font-size: 50rpx;line-height: 1.5em;}.info{font-size: 28rpx;color:#999;display: flex;justify-content: space-between;padding:30rpx 0 50rpx;.left{text{padding-right: 15rpx;}}.right{display: flex;align-items: center;color:var(--themeColor);position: relative;.share{position: absolute;top:0;left:0;opacity: 0;}text{padding-left:5rpx;}} }.content{ .pstyle{padding:10rpx 0;line-height: 1.6em;text-indent: 2em;font-size: 36rpx;}.pstyle .imgstyle{margin-left: -2em;}.imgstyle{border-radius: 15rpx; } }.copyright{margin-top:30rpx;background:var(--globalBgColor2);padding:30rpx;font-size: 26rpx;color:#888;.top{font-size: 30rpx;padding-bottom:15rpx;}}
}
5.1 怎么得到不同页面信息
在点击新闻项时每个组件本身都是一个导航框这个id就用于传递信息
navigator url/pages/new2/new2?id{{item._id}} classnews
在新闻详情页加载的时候有一个参数options是携带传入来的信息的 onLoad: function (options) {console.log(options);id options.idthis.getDetail()},
所以就可以得到具体的id写获取详情函数
5.2 标题、信息 view classtitle{{detail.title}}/viewview classinfoview classleft text{{detail.publish_date}}/text text{{detail.author}}/texttext{{detail.view_count}}阅读/text/viewview classrightvan-icon nameshare-o size20 /text分享/textbutton open-typeshare classshare sizemini享/button/view/view getDetail() {newsDetail({id: id}).then(res {console.log(res);// 以下是正则处理页面标签用来做cssres.data.publish_date formatTime(res.data.publish_date, 1)res.data.view_count formatNum(res.data.view_count)res.data.content res.data.content.replace(/p/gi, p classpstyle)res.data.content res.data.content.replace(/img/gi, img classimgstyle)res.data.content res.data.content.replace(/br\//gi, )this.setData({detail:res.data})})},
res长这样 5.3 富文本内容、尾部
页面详情信息都有了写就行了 view classcontentrich-text nodes{{detail.content}}/rich-text/viewview classcopyrightview classtop免责声明/viewview本文来自网络新闻创作者不代表巷子深小程序端的观点和立场如有侵权请联系客服进行删除。/view/view
6. 商品分类页classify.* 6.1 顶图
没写成循环
view classbannerimage classpic src/static/images/teaBanner.jpg modeaspectFill /
/view
6.2 三方导航条 view classnav!-- active打开第几个页面、点击事件、流畅动画、手势滑动、标签主题颜色、外边框、选中颜色 --van-tabs active{{navActive}} bind:clickonClick animated swipeable color#bda066 border title-active-color#bda066van-tab title{{item.classname}} wx:for{{navArr}} wx:key_id/van-tab/van-tabs
/view async getNavList() {await listNav().then(res {this.setData({navArr: res.data})})},--- apis.js中
export function listNav() {return request({url: /nav/get,method: POST})
}
6.3 获取产品项 /*** 页面的初始数据*/data: {navActive: 4,navArr: [],proArr: [],loading: true},
6.3.1 产品项公用组件 // 这里埋点点击事件第七章用
view classproduct bind:tapclickProduct data-id{{info._id}}!-- 图 --view classpicimage classimage modewidthFix src{{info.picpath}}/image/view!-- 文字 --view classtext!-- 标题 --view classtitle{{info.title}}/view!-- 详细信息 --view classinfo!-- 1 --view classrowview classlefttext spaceemsp货 号/text/viewview classright{{info.pronum}}/view/view!-- 2 --view classrowview classlefttext spaceemsp等 级/text/viewview classright{{info.grade}}/view/view!-- 3 --view classrowview classlefttext spaceemsp年 份/text/viewview classright{{info.year}}/view/view!-- 4 --view classrowview classleft净含量/viewview classright{{info.weight}}/view/view!-- 5 --view classrowview classleft零售价/viewview classright{{info.price}}/view/view/view/view
/view
.product .pic .image {width: 100%;
}.product .text {padding: 15rpx 20rpx;
}.product .title {font-size: 36rpx;color: #333;border-bottom: 1rpx solid #efefef;padding-bottom: 20rpx;margin-bottom: 10rpx;white-space: nowrap;text-overflow: ellipsis;width: 100%;overflow: hidden;
}.product .row {font-size: 28rpx;color: #aaa;display: flex;line-height: 2em;
}.product .row .left {font-size: 26rpx;white-space: nowrap;
}.product .row .right {color: #666;white-space: nowrap;
}
6.3.2 页面
view classcontent
!-- 产品块 --view classbodyview classbox wx:for{{proArr}}xzs-product info{{item}}/xzs-product/view/view!-- 结尾加载 --view classloadOutvan-loading size24px color#3badff wx:if{{loading}}加载中.../van-loadingview classnodata wx:if{{!loading}}No more.../view/view
/view
xzs-footer/xzs-footer /*** 生命周期函数--监听页面加载*/async onLoad(options) {let {idx} options;console.log(options, idx);// 加载完导航条再说别的await this.getNavList();// 如果是从首页来的要直接定位到指定导航点if (idx) {this.onClick(idx)} else {// 如果是当前页面乱点直接访问定位navid this.data.navArr[this.data.navActive]._idthis.getProductList()}},async getNavList() {await listNav().then(res {console.log(导航);console.log(res);this.setData({navArr: res.data})})},// 如果是从首页来的要直接定位到指定导航点onClick(e) {console.log(e);let index e?.detail?.index ?? e;console.log(index,index);this.setData({proArr: [],navActive: Number(index)})navid this.data.navArr[index]._id,this.getProductList()},getProductList() {listProducts({navid: navid, // 获取产品种类的id参数limit: 3,size: this.data.proArr.length}).then(res {this.setData({proArr: this.data.proArr.concat(res.data)})// 够了就别再加载了if (this.data.proArr.length res.total) {this.setData({loading: false})}})},/*** 页面上拉触底事件的处理函数*/onReachBottom() {if (this.data.loading false) return;setTimeout(() {this.getProductList()}, 300)},
7. 商品详情 7.1 在商品项上埋点
view classproduct bind:tapclickProduct data-id{{info._id}}
然后在产品公共组件上js写 /*** 组件的方法列表*/methods: {clickProduct(e){let id e.currentTarget.dataset.idconsole.log(e);wx.navigateTo({// 到详情页时会携带一个参数url: /pages/productShow/productShow?idid,})}}
7.2 详情页
xzs/xzs!-- 骨架屏 --
view stylepadding:50rpx 30rpx; min-height: 50vh; wx:if{{!detail}}van-skeleton title row20 /
/viewview classdetail wx:elseview classbannerimage src{{detail.picpath}}/image/viewview classtextMainview classtitle{{detail.title}}/viewview classtextview classrowview classlefttext spaceemsp货 号/text/viewview classright{{detail.pronum}}/view/viewview classrowview classlefttext spaceemsp等 级/text/viewview classright{{detail.grade}}/view/viewview classrowview classlefttext spaceemsp年 份/text/viewview classright{{detail.year}}/view/viewview classrowview classlefttext spaceemsp净含量/text/viewview classright{{detail.weight}}/view/viewview classrowview classlefttext spaceemsp零售价/text/viewview classright{{detail.price}}/view/view/view/view
/viewxzs-footer/xzs-footer
.banner {width: 750rpx;height: 750rpx;
}.banner image {width: 100%;height: 100%;
}.textMain {padding: 80rpx 30rpx;
}.textMain .title {border-bottom: 1px solid #dedede;padding-bottom: 50rpx;font-size: 50rpx;color: #333;
}.textMain .text {border-top: 1px solid #dedede;margin-top: 50rpx;padding-top: 60rpx;
}.textMain .row {display: flex;padding-bottom: 30rpx;
}.textMain .row .left {font-size: 34rpx;color: #888
}.textMain .row .right {font-size: 38rpx;color: #666;padding-left: 30rpx;
} /*** 页面的初始数据*/data: {detail:null}, /*** 生命周期函数--监听页面加载*/onLoad: function (options) {console.log(options);// 传过来的参数let id options.id;this.getDetail(); },getDetail(){queryProductDetail({id}).then(res{console.log(res);this.setData({detail:res.data})wx.setNavigationBarTitle({title: this.data.detail.title,})})}, 打包上线要钱¥30我不上看看up主的成果
8.0.【完结撒花】项目打包上线及课程总结_哔哩哔哩_bilibili
