小程序基础小程序 VS App注册微信小程序账号项目成员和体验成员小程序开发者id创建小程序项目文件和目录结构基础库小程序调试配置文件介绍全局配置-pages配置注意事项全局配置-window配置全局配置-tabbar配置tabBar: { selectedColor: #f3514f, color: #666, borderStyle: black, position: bottom, list: [ { text: 首页, pagePath: pages/index/index, iconPath: /assets/tabbar/index.png, selectedIconPath: /assets/tabbar/index-active.png }, { text: 分类, pagePath: pages/cate/cate, iconPath: /assets/tabbar/cate.png, selectedIconPath: /assets/tabbar/cate-active.png }, { text: 购物车, pagePath: pages/cart/cart, iconPath: /assets/tabbar/cart.png, selectedIconPath: /assets/tabbar/cart-active.png }, { text: 我的, pagePath: pages/profile/profile, iconPath: /assets/tabbar/profile.png, selectedIconPath: /assets/tabbar/profile-active.png } ] },页面配置项目配置文件和配置Sasssitemap.json文件样式小程序的样式和组件介绍尺寸单位 rpx全局样式和局部样式组件组件案例演示-划分页面结构轮播图区域绘制!-- 轮播图区域 -- view classswiper swiper autoplay circular indicator-dots interval2000 indicator-color#f3514f indicator-active-color#fff swiper-item 1 /swiper-item swiper-item 2 /swiper-item swiper-item 3 /swiper-item /swiper /view// 轮播图区域样式 .swiper{ swiper{ height: 360rpx; background-color: skyblue; swiper-item{ // 在 Sass 中代表的是父选择器引用的意思 // swiper-item:first-child :first-child{ background-color: lightsalmon; } :last-child{ background-color: lightseagreen; } } } }轮播图图片添加小程序中渲染图片需要用image组件 常用属性如下绘制公司信息区域小程序中渲染文本时需要使用text组件常用属性如下商品导航区域点击商品导航跳转到商品列表微信小程序中 需要跳转时使用navigation组件 常用属性如下url在进行页面跳转时 需要在路径前面加 / 斜线 否则跳转不成功delta返回的层级默认是1如果想返回几级就写几推荐商品区域微信小程序中想要实现内容滚动使用scroll-view组件属性如下e.g.scroll-view classscroll-x scroll-x view1/view view2/view view3/view /scroll-view scroll-view classscroll-y scroll-y view1/view view2/view view3/view /scroll-view.scroll-x{ width: 100%; white-space: nowrap; background-color: skyblue; view{ display: inline-block; width: 300rpx; height: 80rpx; :first-child{ background-color: lightgreen; } :last-child{ background-color: lightcoral; } } } .scroll-y{ height: 400rpx; background-color: skyblue; margin-top: 10rpx; view{ height: 400rpx; :first-child{ background-color: lightgreen; } :last-child{ background-color: lightcoral; } } }字体图标的使用背景图片的使用事件系统事件绑定和事件对象事件分类和阻止事件冒泡事件传参-data-*自定义数据view bindtapparentHandler />事件传参-mark 自定义数据view bindtapparentHandler mark:parentid1 mark:parentnametom !-- 如果需要使用 mark 进行事件传参 需要使用 mark: 自定义属性的方式来进行参数传递 -- !-- button bindtapbtnHandler mark:id1 mark:nametom按钮/button -- button mark:id1 mark:nametom按钮/button /viewPage({ // 按钮绑定的事件处理函数 btnHandler(event){ console.log(event.mark.id); console.log(event.mark.name); }, parentHandler(event){ // 先点击蓝色区域 不点击按钮 // 通过事件对象获取的是 view 身上绑定的数据 // 先点击按钮不点击蓝色区域 // 通过事件对象获取到的是 触发事件的节点 以及 父节点身上所有的mark 数据 console.log(event); } })wxml语法声明和绑定数据!-- 如果需要展示数据在 wxml 中需要使用双大括号写法将变量进行包裹 -- view{{school}}/view view{{obj.name}}/view !-- 绑定属性值 如果需要动态绑定一个变量 属性值也需要使用双大括号进行包裹 -- view id{{id}}绑定属性值/view !-- 如果属性值是布尔值也需要用双大括号包裹 -- checkbox checked{{ isChecked}}/ !-- 算数运算 -- view{{ id 1 }}/view view{{ id - 1 }}/view !-- 三元运算 -- view{{ id 1 ? 等于:不等于}}/view !-- 逻辑判断 -- view{{id 1}}/view !-- 在双大括号写法内部 只能写表达式 不能写语句 不能调用 js 的方法 -- !-- view{{if (id 1){}}}/view -- !-- view{{for (const i 0;i 10; i) {}}}/view -- view{{obj.name.toUpperCase()}}/view// index.js Page({ // 在小程序页面中所需要使用的数据均来自于 data 对象 data:{ id:1, isChecked:false, school:尚硅谷, obj:{ name:tom } } })setData() 修改数据!--pages/cate/cate.wxml-- view{{ num }}/view button bindtapupdataNum更新 num/button// pages/cate/cate.js Page({ data:{ num:1 }, // 更新num updataNum(){ // 更新数据 // console.log(this.data.num); // 通过赋值的方式直接修改数据 但是不能修改页面上的数据 // this.data.num 1 // console.log(this.data.num) // this.setData 两个作用 // 1.更新数据 // 驱动视图页面更新 this.setData({ // key:是需要更新的数据 // value是最新的值 num:this.data.num 1 }) } })setData修改对象类型数据新增删除setData修改数组类型数据新增方式二修改删除方式一方式二简易双向数据绑定列表渲染-基本使用列表渲染-进阶用法用法二条件渲染生命周期小程序运行机制小程序更新机制小程序生命周期介绍应用生命周期页面生命周期生命周期两个细节小程序API介绍发起网络请求