微信小程序培训课件

1、微信小程序微信小程序第1页小程序包含一个描述整体程序 app 和多个描述各自页面 page。一个小程序主体部分由三个文件组成，必须放在项目标根目录，以下：app.jsapp.jsonapp.wxss必需小程序逻辑必需小程序公共设置非必需小程序公共样式微信小程序第2页一个小程序页面由四个文件组成，分别是：（页面这四个文件必须含有相同路径与文件名）js必需页面逻辑wxml必需页面结构wxss非必需页面样式json非必需页面配置微信小程序第3页app.json 配置pages必需页面路径window非必需页面窗口表现tabBar非必需设置tabdebug非必需能够在开发者工具中开启 debug 模式

2、networkTimeout非必需设置各种网络请求超时时间微信小程序第4页pages数组形式，每一项对应一个页面【路径+文件名】。 不需要后缀名。微信小程序第5页window用于设置小程序状态栏、导航条、标题、窗口背景色navigationBarBackgroundColor：导航栏背景颜色 （十六进制）navigationBarTextStyle：导航标题颜色（仅支持black/white）navigationBarTitleText：导航标题backgroundColor：窗口背景色（十六进制）backgroundTextStyle：下拉背景字体、loading 图样式，仅支持 dark/

3、lightenablePullDownRefresh：是否开启下拉刷新微信小程序第6页tabBartabBar 是一个数组，只能配置最少2个、最多5个 tab，tab 按数组次序排序。color： tab 上文字默认颜色（十六进制）selectedColor ： tab 上文字选中时颜色（十六进制）backgroundColor ： tab 背景色（十六进制）borderStyle ： tabbar上边框颜色， 仅支持 black/whitelist ：数组pagePath：页面路径，必须在 pages 中先定义text： tab 上按钮文字iconPath：图片路径，icon 大小限制为40

4、kbselectedIconPath：选中时图片路径，icon 大小限制为40kb微信小程序第7页tabBarposition ：可选值 bottom（默认）、top微信小程序第8页app.js App()App()函数用来注册一个小程序。接收一个 object 参数，其指定小程序生命周期函数等。全局getApp()函数，能够获取到小程序实例onLaunch ：当小程序初始化完成时，会触发 onLaunch（全局只触发一次） onShow ：当小程序开启，或从后台进入前台显示，会触发 onShow onHide ：当小程序从前台进入后台，会触发 onHide onError ：当小程序发生脚本

5、错误，或者 api 调用失败时，会触发 onError 并带上错误信息其它：开发者能够添加任意函数或数据到 Object 参数中，用this能够访问微信小程序第9页PagePage()函数用来注册一个页面。接收一个 object 参数，其指定页面初始数据、生命周期函数、事件处理函数等。data：页面初始数据onLoad：页面加载onReady：监听页面首次渲染完成onShow ：监听页面显示onHide ：监听页面隐藏onUnload：监听页面卸载onPullDownRefresh：监听用户下拉动作onReachBottom：页面上拉触底事件处理函数onShareAppMessage ：用户点

6、击右上角分享 微信小程序第10页Page setData()setData函数用于将数据从逻辑层发送到视图层，同时改变对应this.data值。微信小程序第11页WXMLWXML（WeiXin Markup Language）是框架设计一套标签语言，用于描述页面结构。基本绑定逻辑判断for循环 微信小程序第12页WXSSWXSS(WeiXin Style Sheets)是一套样式语言，用于描述 WXML 组件样式尺寸单位：rpx，能够依据屏幕宽度进行自适应。1rpx = 0.5px（iphone6）。import语句能够导入外联样式表相对路径，用;表示语句结束。组件上支持使用 style、cl

7、ass 属性来控制组件样式。选择器.class#idelementelement,element:after：组件后面:before：组件前面微信小程序第13页组件一个组件通常包含开始标签和结束标签，属性用来修饰这个组件全部组件和属性都是小写基本属性：idclassstylehiddendata-*：自定义属性，以data-开头，多个单词由连字符-链接，不能有大写(大写会自动转成小写)如data-element-type，最终在 event.target.dataset 中会将连字符转成驼峰elementType写法bind*/catch*：绑定事件微信小程序第14页组件data-alpha-

8、beta alphaBetadata-alphaBetaalphabeta微信小程序第15页组件视图容器view：基本视图scroll-view：滚动视图swiper：滑块视图表单组件buttoncheckforminputpickerslidertextarea微信小程序第16页组件导航navigator基础内容icontextprogress媒体audioimagevideo其它（画布、地图、客服）微信小程序第17页组件scroll-viewscroll-x(y)：横向（纵向）滚动scroll-top(left) ：设置竖向（横向）滚动条位置scroll-into-view：值应为某子元素

9、id，则滚动到该元素，元素顶部对齐滚动区域顶部bindscrolltoupper：滚动到顶部/左边，会触发 scrolltoupper 事件bindscrolltolower：滚动到底部/右边，会触发 scrolltolower 事件bindscroll：滚动时触发微信小程序第18页组件button属性size：有效值 default, minitype：按钮样式类型，有效值 primary, default, warnplain：按钮是否镂空，背景色透明disabled：是否禁用loading：名称前是否带 loading 图标form-type：有效值：submit, reset，用于组件

10、，点击分别会触发 submit/reset 事件hover-class：指定按钮按下去样式类。当hover-class=none时，没有点击态效果微信小程序第19页组件input value：输入框初始内容type：input 类型，有效值：text, number, idcard, digitpassword：是否是密码类型placeholder：占位符placeholder-style（placeholder-class）：指定placeholder样式disabled：是否禁用maxlength：最大输入长度，设置为 -1 时候不限制最大长度focus：获取焦点微信小程序第20页组件in

11、put bindinput：当键盘输入时，触发input事件，event.detail = value: value，处理函数能够直接 return 一个字符串，将替换输入框内容bindfocus：输入框聚焦时触发，event.detail = value: valuebindblur：输入框失去焦点时触发，event.detail = value: valuebindconfirm：点击完成按钮时触发，event.detail = value: value微信小程序第21页APIwx.request：发起网络请求wx.setStorageSync(key，value)：同时存放到当地缓存至key中wx.getStorageSync(key)：同时获取key对应内容wx.removeStorageSync(ke