--- theme: channing-cyan highlight: rainbow --- ## 搭建小程序项目 ### 项目架构通过小程序开发者工具自动初始化一个项目，项目框架如下所示：

- `pages`：存放所有小程序的页面 - `utils`：存放工具性质的模块 (例如:格式化时间的自定义模块) - `app.js`：小程序项目的入口文件 - `app.json`：小程序项目的全局配置文件 - `app.wxss`：小程序项目的全局样式文件 - `project.config.json`：项目的配置文件 - `sitemap.json`：配置小程序及其页面是否允许被微信索引每个page页面都包含4部分，分别如下所示：

- `.js 文件`：页面的脚本文件，存放页面的数据、事件处理函数等 - `.json 文件`：当前页面的配置文件，配置窗口的外观、表现等 - `.wxml 文件`：页面的模板结构文件 - `.wxss 文件`：当前页面的样式表文件每个小程序都有一个app.json文件，进行全局配置。

- `pages`：所有页面及路径 - `window`：全局定义小程序所有页面的背景色及文字颜色等 - `style`：全局定义小程序样式版本 ### 宿主环境宿主环境 (host environment) 指的是程序运行所必须的依赖环境。例如:Android 系统和 ios 系统是两个不同的宿主环境。安卓版的微信 App 是不能在 ios 环境下运行的，所以，Android 是安卓软件的宿主环境，脱离了宿主环境的软件是没有任何意义的。小程序的宿主环境指的是手机微信，小程序可以调用宿主环境的各个功能。 ## 常用组件及API ### 组件 **text** 作用：类似于HTML中的`span`标签，属于行内元素。selectable 属性支持实现长按选中文本内容的效果。 ``` 长按选中文本 ``` **rich-text** 作用：富文本组件，支持把HTML结构渲染为WXML结构 ``` HTML代码"> ``` **view** 作用：普通视图区域，类似于HTML中的`div`标签，属于块级元素，可以快速实现页面布局 **scroll-view** 作用：可滚动的视图区域，类似于HTML中的`div`标签，属于块级元素，可以实现滚动列表布局 **swiper和swiper-item** 作用：实现轮播图和轮播图item组件 swiper组件常用属性如下所示： - indicator-dots：是否显示面板指示点 - indicator-color：指示点默认颜色 - indicator-active-color：指示点选中颜色 - autoplay：是否自动切换 - interval：自动切换的时间间隔 - circular：是否采用衔接滑动 **button** 作用：按钮组件，支持多种属性配置 - type：按钮类型 - size：按钮尺寸 - plain：镂空按钮样式 **image** 作用：图片标签，src属性表示图片地址 - scaleToFill：(默认值)缩放模式，不保持纵横比缩放图片，使图片的宽高完全拉伸至填满 image 元素 - aspectFit：缩放模式，保持纵横比缩放图片，使图片的长边能完全示出来。也就是说，可以完整地将图片显示出来 - aspectFill：缩放模式，保持纵横比缩放图片，只保证图片的短边能完全显示出来。也就是说，图片通常只在水平或垂直方向是完整的，另一个方向将会发生截取 - widthFix：缩放模式，宽度不变，高度自动变化，保持原图宽高比不变 - heightFix：缩放模式，高度不变，宽度自动变化，保持原图宽高比不变 ### 生命周期 **应用生命周期** ``` App({ // 小程序初始化完成时执行，全局只触发一次,可以做一些初始化的工作 onLaunch: function(options) {} // 小程序启动，或从后台进入前台显示时触发 onShow: function(options) {} // 小程序从前台进入后台时触发 onHide: function() {} }) ``` **页面生命周期** ``` Page({ onLoad: function(options){}, // 监听页面加载，一个页面只调用1次 onShow: function(){}, // 监听页面显示 onReady: function(){}, // 监听页面初次渲染完成，一个页面只调用1次 onHide: function(){}, // 监听页面隐藏 onUnload: function(){} // 监听页面卸载，一个页面只调用1次 }) ``` ### 页面导航 **``声明式导航** ``` 导航到消息页面导航到info页面返回上一页 ``` **编程式导航** ``` // 跳转到tab页面 goMessage(){ wx.switchTab({ url:'pages/message/message?name=zs&age=20' }) } // 跳转到非tab页面 goMessage(){ wx.navigateTo({ url:'pages/info/info?name=zs&age=20' }) } // 后退一个页面 goToBack(){ wx.navigateBack() } ``` > 通过声明式导航传参或编程式导航传参所携带的参数，可以直接在 onLoad 事件中直接获取到通过onLoad接收参数 ``` onLoad:function(options){ console.log(options) } ``` ### 页面事件 **下拉刷新事件** ``` onPullDownRefresh:function(){ console.log("自动监听，触发了当前页面的下拉刷新"); // 当数据重置成功之后，调用此函数，关闭下拉刷新的效果 wx.stopPullDownRefresh(); } ``` **上拉加载事件** ``` // 结合节流优化频繁上拉的性能 onReachBottom:function(){ console.log("触发了当前页面的上拉加载"); } ``` ### 内部状态在index.js文件中使用data属性配置内部状态 ``` Page({ data: { count: 0 } }) ``` 在index.wxml文件中通过{{}}语法绑定内部状态 ``` {{count}} ``` > {{}}语法既可以绑定内容，也可以绑定属性、算术运算、三木运算等 ### 事件绑定小程序中常用的几类事件包括tab、input、change - tap：手指触摸后立即离开，类似于click事件 ``` // 绑定事件(无参数) // 创建事件 page({ handleBindTap(e) { this.setData({ count:this.data.count+1 }) console.log(e) // 事件对象 }, }) // 绑定事件，传递参数 // 接收参数 page({ handleBindTap(e) { this.setData({ count:e.target.dataset.info }) }, }) ``` - input：文本框输入事件 ``` // 绑定事件 // 创建事件 page({ handleBindInput(e) { console.log(e.detail.value) // input框目前的最新值 }, }) ``` - change：状态改变时触发 ### 条件渲染 wx:if控制单个标签显示和隐藏 ``` xxx yyy 000 ``` wx:if控制多个标签的显示和隐藏 ``` xxx yyy ``` > ``只是一个包裹容器，不会渲染为一个标签 `hidden="{{}}"`控制单个标签的显示和隐藏 ``` ``` > wx:if通过动态创建和移除元素来控制元素的显示和隐藏；hidden通过给元素添加移除display:none/block属性实现元素显示和隐藏 ### 列表渲染 ``` 索引：{{index}}，元素：{{item}} ``` ## wxss样式渲染 ### rpx rpx 的实现原理：由于设备屏幕的大小不同，为了实现屏幕的自动适配，rpx 把所有设备的屏幕在宽度上等分为 750 份 (即: 当前屏幕的总宽度为 750rpx) 。 - 在较小的设备上，1rpx 所代表的宽度较小 - 在较大的设备上，1rpx 所代表的宽度较大小程序在不同设备上运行的时候，会自动把rpx 的样式单位换算成对应的像素单位来渲染，从而实现屏幕适配。 ### @import导入样式 ``` @import "common.wxss"; ``` ## 全局配置 ### window 通过window对象可以对小程序的导航栏、背景进行全局配置 - 导航栏 - navigationBarTitleText：导航栏标题文字 - navigationBarBackgroundColor：导航栏背景颜色 - navigationBarTextStyle：导航栏标题颜色，black/white - 窗口 - backgroundColor：窗口背景色 - backgroundTextStyle：下拉loading样式，black/white - enablePullDownRefresh：是否开启全局下拉更新 - onReachBottomDistance：页面上拉触底事件触发时距离页面底部距离，单位px ### tabBar 用于实现多页面的快速切换，小程序中的tabBar分为底部和顶部tab。 - backgroundColor: tabBar 的背景色 - selectedlconPath: 选中时的图片路径 - borderStyle: tabBar 上边框的颜色 - iconPath: 未选中时的图片路径 - selectedColor: tab 上的文字选中时的颜色 - color: tab 上文字的默认 (未选中) 颜色 - pagePath：页面路径 - text：文本内容 ``` tabBar:{ "list":[{ "pagePath":"pages/list/list", "text":"列表页" }] } ``` ### 网络请求 ``` wx.request({ url:"", method:"GET", // 支持GET、POST等 data:{}, success:()=>{} }) ```