舒大少博客

1. 内嵌 WXS 脚本
   xxx.wxml
   <view>{{m1.toUpper(username)}}</view>

   <wxs module=”m1″>

     module.exports.toUpper=function(e){

       return e.toUpperCase()

     }

   </wxs>

   xxx.js

   data: {

       username:”username”

     },
2. 定义外联 WXS 脚本
   在 tools文件夹下新建文件为 tools.wxs
   function toLower(str){

     return str.toLowerCase()

   }

   module.exports={

     toLower:toLower

   }
3. 使用外联 WXS 脚本
   在WXML 中引入外联的wxs脚本时，必须为 wxs 标签添加 module 和 src 属性，其中：
   module 用来指定模块的名称
   src 用来指定要引入的脚本的绝对路径
   

1. 监听页面的下拉刷新事件
   在页面的.js 文件中，通过 onPullDownRefresh() 函数即可监听当前页面的下拉刷新事件
2. 停止下拉刷新事件
   当处理完下拉刷新后，下拉刷新的 loading 效果会一直显示，不会主动消失。
   调用wx.stopPullDownRefresh() 可以停止当前页面的下拉刷新
3. 监听上拉触底事件
   在页面的.js 文件中，通过 onReachBottom() 函数即可监听当前页面的上拉触底事件
4. 添加loading效果
   
5. 对上拉触底进行节流处理
   
   data:{
   isLoding:false
   }
   getColor:{
   this.setData({
   isLoding:true
   })
   wx.request(){
   success下面
   complete:()=>{
   wx.hideLoading()
   this.setData({
   isLoding:false
   })
   }
   }
   }
   onReachBottom:function(){
   if(this.data.isLoading) return
   this.getColors()
   }

1. 声明式导航传参
   navigator组件的url属性用来指定将要跳转到的页面的路径。同时，路径的后面还可以携带参数。
   参数与路径之间使用?分隔
   参数键与参数值用=相连
   不同参数用&分隔
   代码示例如下:
   <navigator url=”/pages/info/info?username=zs&age=22″>导航传参</navigator>
2. 编程式导航传参
   
3. 在 onLoad 中接收导航参数
   通过声明式或编程式导航传参所携带的参数，可以直接在 onLoad 事件中 直接获取到。示例代码
   

1. 小程序中实现页面导航的两种方式
   1、声明式导航：在页面上声明一个 navigator 导航组件，通过点击 navigator 组件实现页面跳转
   2、编程式导航：调用小程序的导航API，实现页面的跳转
2. 声明式导航
   tabBar页面指的是被配置为tabBar的页面
   在使用 navigator 组件跳转到指定的 tabBar 页面时，需要指定 url 属性和 open-type 属性，其中
   url 表示要跳转的页面的地址，必须以 / 开头
   open-type 表示跳转的方式，必须为 switchTab
   示例代码：
   <navigator url=”/pages/massage/message” open-type=”switchTab”>导航到消息页面</navigator>
3. 导航到非 tabBar页面
   非tabBar页面指的是没有配置tabBar的页面
   在使用 navigator 组件跳转到普通的非 tabBar 页面时，需要指定 url 属性和 open-type 属性，其中
   url 表示要跳转的页面的地址，必须以 / 开头
   open-type 表示跳转的方式，必须为 navigate
   示例代码：
   <navigator url=”/pages/massage/message” open-type=”navigate”>导航到消息页面</navigator>
4. 后退导航
   如果要后退上一页面或多级页面，则需要指定 open-type 属性 和 delta 属性，其中：
   open-type 的值必须是 navigateBack，表示要进行后退导航
   dalta 的值必须是数字，表示要后退的层级
   示例代码：
   <navigator open-type=”navigateBack” delta=”1″>返回上一页</navigator>
   注意：可以省略 delta，默认值是1

1.  编程式导航

1、导航到tabBar页面

调用 wx.switchTab(Object obj)方法，可以跳转到 tabBar页面。其中Object 参数对象的属性列表如下：

2. 导航到非 tabBar页面

调用 wx.navigateTo(Object obj)方法，可以跳转到非tabBar页面。其中Object 参数对象的属性列表如下：

3. 后退导航

调用wx.navigateBack(Object obj)方法，可以返回上一级或多级页面，其中 Object参数对象 可选的属性列表如下：

微信小程序之九宫格布局

页面：

1. 小程序中网络数据请求的限制
   出于安全性方面的考虑，小程序官方对数据接口的请求做出了如下两个限制：
   1、只能请求 https 类型的接口
   2、必须将接口的域名添加到信任列表里（右上角详情—>项目配置–>域名信息）
2. 发起GET请求
   调用微信小程序提供的 wx.request() 方法，可以发起 GET数据请求，代码如下：
   

xxx.wxml

1. 什么是tabBar
   tabBar 是移动端应用常见的页面效果，用于实现多页面的快速切换。
   小程序中通常将其分为：底部 tabBar、顶部 tabBar
   注意：tabBar 中只能配置 最少2个，最多5个tab页签，当渲染顶部 tabBar时，不显示 icon，只显示文本
2. tabBar 的6个组成部分
   
3. tabBar 节点的配置项
   
4. 每个tab项的配置选项
   app.json:
   “tabBar”: {

       “list”: [

         {

           “pagePath”: “pages/home/home”,

           “iconPath”: “/images/home.png”,

           “selectedIconPath”: “/images/home-active.png”,

           “text”: “首页”

         },

         {

           “pagePath”: “pages/message/message”,

           “iconPath”: “/images/message.png”,

           “selectedIconPath”: “/images/message-active.png”,

           “text”: “消息”

         },

         {

           “pagePath”: “pages/contact/contact”,

           “iconPath”: “/images/contact.png”,

           “selectedIconPath”: “/images/contact-active.png”,

           “text”: “联系我们”

         }

       ]

     },

1. 全局配置文件及常用的配置项
   小程序根目录下的 app.json 文件是小程序的全局配置文件。常用的配置项如下：
   1：pages：记录当前小程序所有的页面存放路径
   2、window：全局设置小程序窗口的外观
   3、tabBar：设置小程序底部的 tabBar 效果
   4、style：是否启用新版的组件样式
2. 全局配置-window
   1、小程序窗口的组成部分
   
   2、 了解 window 节点 常用的配置项
   3、设置导航栏的标题
   设置步骤：app.json–>window–>navigationBarTitleText
   演示：把导航条上的标题，从默认的 WeChat 修改为 我的第一个微信小程序，效果如图
   4、设置导航栏的背景色
   设置步骤：app.json–>window–>navigationBarBackgroundColor
   演示：把导航栏标题的背景色，从默认的 #fff 修改为 #994855，效果如图
   5、设置导航栏的标题颜色
   设置步骤：app/json–>window–>navigationBarTextStyle
   演示：把导航条上的标题，从默认的 black 修改为 white ，效果如图
   

   6、全局开启下拉刷新功能
   设置步骤：app.json–>window–>把 enablePullDownRefresh 设为 true，效果如图
   

   7、 设置下拉刷新时背景颜色
   当全局开启下拉刷新功能之后，默认的窗口背景为白色，如果自定义下拉刷新窗口背景色
   设置步骤：app.json–>window–>为 backgroundColor 指定16进制的颜色值 #9e9e9e，效果如下
   

   8、 设置下拉刷新时 loading 的样式
   当全局开启下拉刷新功能之后，默认窗口的 loading 样式为白色，如果要更改 loading 样式的效果
   设置步骤：app.json–>window–>为 backgroundTextStyle 指定 dark  值
   可选值为 light 和 dark
   

   9、设置上拉触底的距离
   概念：上拉加载更多数据
   设置步骤：app.json–>window–>为 onReachBottomDistance 设置新值。默认50px，px可省略

1. 全局样式
   定义在 app.wxss 中的样式为全局样式，作用于每一个页面
2. 局部样式
   在页面的.wxss 中的样式为局部样式，作用于当前页面

1. 什么是WXSS
   WXSS（WeiXin Style Sheets）是一套样式语言，用于美化 WXML 的组件样式，类似于网页开发中的 CSS
2. WXSS 与 CSS 的 关系
   WXSS具有Css大部分特性，同时，WXSS 还对 CSS 进行了扩充以及修改，以适应微信小程序的开发。
   与 CSS 相比，WXSS 扩展的特性有：
   1、rpx 尺寸单位 2、@import 样式导入
3. 什么是 rpx 尺寸单位
   rpx (responsive pixel) 是微信小程序独有的，用来解决屏适配的尺寸单位。
4. rpx 实现原理
   rpx的实现原理非常简单:鉴于不同设备屏幕的大小不同，为了实现屏幕的自动适配，rpx把所有设备的屏幕，在宽度上等分为 750 份(即:当前屏幕的总宽度为750rpx)。
   小程序在不同设备上运行的时候，会自动把rpx的样式单位换算成对应的像素单位来渲染，从而实现屏幕适配。
5. 样式导入
   使用WXSS 提供的 @import  语法，可以导入外联的样式表
6. @import 的语法格式
   @import 后跟需要导入的外联样式表的相对路径，用 ; 表示语句结束。示例：
   @import “xxx.wxss”;

1.wx:for

通过 wx:for 可以根据指定的数组，循环渲染重复的组件结构，语法如下：

1.wx:if

在小程序中，使用 wx:if=”{{condition}}” 来判断是否需要渲染该代码块

在 data里 设置属性 sex: 1

通过 bindinput 可以为文本框绑定输入事件

可以为组件通过 data-* 自定义属性传参，其中 * 代表的是参数的名字，示例

通过调用 this.setData(dataObject) 方法，可以给页面 data 中的数据重新赋值

xxx.js
data:{
count:0
},
ChangeCount(){
this.setData({
count: this.data.count +1
})
},

xxx.wxml

1. 什么是事件
   事件是渲染层到逻辑层的通讯方式。通过事件可以将用户在渲染层产生的行为，反馈到逻辑层进行业务的处理。
   
2. 小程序中常用的事件 （更多…）

1. 数据绑定的基本原则
   1. 在data中定义数据
   2. 在WXML中使用数据
2. 在data中定义页面的数据
   在页面对应的.js文件中，数据定义到data对象中即可。
   
3. Mustache 语法的格式
   在data中的数据绑定到页面中渲染，使用Mustache 语法(双大括号)将变量名包起来即可。语法格式如下： （更多…）

1. 小程序API概述
   小程序中的API是由宿主环境提供的，通过这些丰富的小程序API，开发者可以方便的调用微信提供的能力，例如：获取用户信息，本地存储，支付功能等。
2. 小程序API的3大分类
   小程序官方把api分为了如下3大类：
   1. 事件监听api：
   特点：以on开头，用来监听某些事件的触发。
   举例：wx.onWindowResize(function callback)监听窗口尺寸变化的事件
   2. 同步api
   特点1：以Sync结尾的api都是同步api
   特点2：同步api的执行结果，可以通过函数返回值直接获取，如果执行出错会抛出异常
   举例：wx.setStorageSync(‘key’,’value’)向本地存储中写入内容
   3. 异步api
   特点：类似于jQuery中的$.ajax(options)函数，需要通过success、fail、complete接收调用的结果
   举例：wx.request() 发起网络请求，通过success 回调函数接收数据

1. 小程序中组件的分类
   小程序中的组件也是由宿主环境提供的，开发者可以基于组件快速搭建出漂亮的页面结构。
   官方把小程序的组件分为9大类，分别是：
   1. 视图容器、2. 基础内容、3.表单组件、4.导航组件、5.媒体组件、6.map地图组件、7.canvas画布组件、8.开放能力、9.无障碍访问
2. 常用的视图容器类组件
   1. view：普通视图区域、类似于HTML中的div，是一个块级元素，常用来实现页面的布局效果
   2. scroll-view：可滚动的视图区域，常用来实现滚动列表效果 （更多…）

1. 小程序启动的过程
   1. 把小程序的代码包下载到本地
   2.解析 app.json 全局配置文件
   3. 执行 app.js 小程序入口文件，调用 App()创建小程序实例
   4. 渲染小程序首页
   5. 小程序启动完成
2. 小程序页面渲染的过程
   1. 加载解析页面的 .json配置文件
   2. 加载页面的 .wxml 模板 和 .wxss 样式
   3. 执行页面的.js文件，调用 Page()创建页面实例
   4. 页面渲染完成