小程序首页详情页搭建

1、HTML5小程序 美容平台搭建一、开发工具与环境（宋体小四加粗）1.1开发者工具二、小程序环境配置2.1 详见小程序文档三、App.json 窗口样式配置3.1 页面路径注意：如下 每增加一条 自动产生一个文件夹pages: pages/test1/test1, pages/test/test, pages/logs/logs,3.2、窗口样式设置window: backgroundTextStyle: light, 下拉 loading 的样式，仅支持navigationBarBackgroundColor: #8e2323, 导航栏背景颜色dark/ lightnavigationBarT

2、itleText: 美容管理中心, 导航栏标题文字内容navigationBarTextStyle: white 导航栏标题颜色，仅支持 black/ white3.3 tababr 条样式设置tabBar: backgroundColor:#8e2323, tab 的背景色，仅支持十六进制颜色position:bottom, tabBar 的位置，仅支持 bottom / top list: pagePath: pages/logs/logs, 页面路径，必须在 pages 中先定义text: 日志, tab 上按钮文字iconPath: images/default_pic.png, 图片

3、路径，icon 大小限制为 40kb，建议为81px * 81px，不支持网络图片。selectedIconPath:images/date.png 选中时的图片路径，,pagePath: pages/test/test,text: 测试,iconPath: images/default_pic.png,selectedIconPath: images/date.png,pagePath: pages/test1/test1,text: 测试 1,iconPath: images/default_pic.png,selectedIconPath:images/date.png,四、数据绑定4.

4、1 Js 对应部分data: 列表渲染条件渲染msg:欢迎来到 学习的世界,array:张三,李四, /数组,address:未知, /对象dx:name:王小,song:ObArray: name: 王小, song: , address: 未知 0 , name: 哈哈, song: 猪, address: 未知 2 , name: 回调函, song: , address:未知 1, /对象数组,4.2 wxml 对应部分msgitem view1 view2 .item.song.item.address.五、组件5.1

5、 js 对应部分data: picArray: ,5.2 wxml 对应部分 六、6.1 wxml 对应部分 对应 js 中gotoOther 函数6.2 js 对应部分gotoOther:function(e) console.log(hahhaha); wx.navigateTo(url: /pages/index/index,),七首页搭建7.1 第一部分 轮播图搭建/index.js 部分/获取应用实例const app = getApp()/ require 获取 本机 其他 js 文件 并保存变量var data = require(././utils/data.js) Page(

6、data: / 轮播图 banner 初始化数据banner_url: data.getBannerData()WXML 模块 7.2 导航栏 tab 切换图标item.title导航栏 图标js 对应部分Page(data: / 轮播图 banner 初始化数据banner_url: data.getBannerData(),/ 导航栏数据navTopItems: data.getIndexNavData(),/ 导航栏 tab 当前的 id curNavId:1,/ 导航栏 tab 当前的索引 小标curIndex:0 ,/ 文字颜色切换的 数组, colors:red,orange,ye

7、llow,green,purple,/ 导航栏列表内容数据navSection: data.getIndexNavSectionData(),/处理函数bindViewTap: function() wx.navigateTo(url: ./logs/logs),/ 当小程序 页面 被加载的时候 执行的时间onLoad: function () / 重新在 data 对象内创建 新的属性 listthis.setData( list:this.data.navSection),/ 对应的 导航切换的函数switchTab:function(e)/let 定义局部变量/ parseInt 把字符

8、串 转化为 整型let id = parseInt(e.currentTarget.dataset.id) ; let index = e.currentTarget.dataset.index; this.setData(curNavId:id, curIndex: index),7.3 导航栏 section内容切换view!- list 是否为空 -wx:if=listcurIndexviewviewclass=section_image data_id=item.id bindtap=navagate图片路径 是否-item.subject价格:item.price描述:item.me

9、ssage预约八 详情页面8.1 Wxml 内容秋季自然特价美甲价格：￥198美甲是一种对指（趾）甲进行装饰美化的工作，又称甲艺设计。美甲是根据客人的手形、甲形、肤质、服装的色彩和要求，对指（趾）甲进行、清洁、护理、保养、修饰美化的过程。具有表现形式多样化的特点。详情描述一、涂指甲油之前要指甲底油二、不涂面油会让美甲面不堪一击三、短甲小最好涂深色指甲油四、美甲颜色要保持协调五、不要小看修甲工具立即预定九 预约界面9.1wxmladdrArrayaddrIndexvalue=addrIndexviewclass=ar_content_h1服务的时间viewclass=ar_datedatetim

10、ebindchange=bindTimeChange留言 placeholder-style=font-family:确定预定9.2 预约界面 js/require 获取本机其他 js 文件并保存到变量var util = require(././utils/util.js) var data = require(././utils/data.js)/ pages/book/book.jsPage(/* 页面的初始数据*/ data: / 地址源数据addrArray: util.replacePhone(data.userData().addrs,true),/ 默认 0 位数据addrIn

11、dex:0,/ 默认日期date:2019-9-24,/ 时间time:12:00,/ 提示框 toast 的隐藏属性bookToastHidden:true,/* 生命周期函数-页面加载*/onLoad: function (options) ,/ 地址选择bindAddrPickerChange:function(event)console.log(picker的 value 属性+event.value);/ 重新设置 addrIndex 属性，同步更新页面地址数据this.setData(addrIndex: event.),/ 日期选择.valuebindDateChange: function (event) console.log(picker的 value 属性 + event.value);/ 重新设置 date 属性，同步更新页面地址数据this.setData(date: event.),/ 时间选择.valuebindTimeChange: function (event) console.log(picker的 value 属性 + event.value);/ 重新设置 ti