微信小程序学习文档

1.text 文本

1⃣️显示连续空格

    
        <p><text space='ensp'>11</text></p>
        <p><text space='emsp'>11</text></p>
        <p><text space='nbsp'>111</text></p>

2⃣️文本是否可选,其他组建都无法长按选中

    
        <p><text selectable >11</text></p>

3⃣️是否连续空格，可解析

    
        <p><text decode > & nbsp;& emsp; & lt;</text></p>

2.view 视图容器

1⃣️hover-class:指令按下去的样式类；

2⃣️hover-stop-propagation:指定是否阻止本节点的祖先节点出现点击态；

3⃣️hover-start-time:按住后多久出现点击态，单位毫秒；

4⃣️hover-stay-time:手指松开后点击态保留时间，单位毫秒；

3.使用全局配置文件app.json

window 节点常用的配置项

设置导航栏标题文字内容

app.json->window->navigationBarTitleText

设置下拉loading的样式

app.json->window->backgroundTextStyle 指定'dark'或者'light'

设置上拉触底的距离

app.json->window->onReachBottomDistance 设置新的数值（默认为50px）

4.wxs 脚本

1⃣️wxs(weiXin Script) 是小程序的一套脚本语言，结合WXML,可以构建出页面的结构。

wxs 的注意点：

没有兼容性：不依赖于运行时的基础库版本，可以在所有版本的小程序中运行；
与javascript 不同：wxs 与 javascript 是不同的语言，有自己的语法，并不和javascript一致；
隔离性：wxs 的运行环境和其他 javascript 代码是隔离的，wxs 中不能调用其他 javascript 文件中定义的函数，也不能调用小程序提供的API；
不能作为事件回调：wxs 函数不能作为组件的事件回调；
ios设备上比javascript 运行快：由于运行环境的差异，在ios设备上小程序内的wxs 会比javascript 代码快2～20倍。在android 设备上二者运行效率无差异；

wxs 遵循CommonJS 模块化规范：

module 对象：每个wxs 都是独立的模块，每个模块均有一个内置的module 对象，每个模块都有自己独立的作用域；
module.exports：由于 wxs 拥有独立作用域，所以在一个模块里面定义的变量与函数，默认为私有的，对其他模块不可见，通过 module.exports 属性，可以对外共享本模块的私有变量与函数；
require 函数：在wxs 模块中引用其他wxs 文件模块，可以使用 require 函数；

2⃣️wxs基础语法

通过module.exports属性，可以对外共享本模块的私有变量与函数：

               
                    var foo ='hello moto';//定义私有变量 foo
                    var bar = function(d){//定义私有函数 bar
                         return d
                    }
                    module.exports ={// 通过 module.exports 向外共享私有成员
                        Foo:foo,//向外共享私有变量 foo
                        bar:bar//向外共享私有函数 bar

                    };
                    module.exports.msg='vivi';//额外向module.exports 中挂载msg 变量

使用 require 引入其它 wxs 模块：

假设有两个wxs 模块，路径分别为 /pages/tools.wxs 和/pages/logic.wxs，如果要在 logic.wxs 中引入 tools.wxs 脚本，则示例代码如下：

                   
                       // 使用require 倒入 tools.wxs 脚本
                        var tools =require('./tools.wxs');
                      //得到的tools对象，可以直接访问到 tools.wxs 中向外暴露的变量和方法

3⃣️使用 require 的注意点

在wxs 模块中引用其他的wxs 文件模块，可以使用 require 函数：

a.只能引用 .wxs 文件模块，且必须使用相对路径；
b.wxs 模块均为单例：wxs 模块在第一次被引用时，会自动初始化为单例对象，多个页面，多个地方，多次引用，使用的都是同一个wxs 模块对象；
c.如果一个wxs 模块在定义之后：一直没有被引用，则该模块不会被解析与运行；

4⃣️支持的数据类型

wxs 语言目前共有以下8种数据类型：

number 数值类型；
string 字符串类型；
boolean 布尔类型；
object 对象类型；
function 函数类型；
array 数组类型；
date 日期类型；
regexp 正则；

注意，由于和javascript是不同的语言，不一样的语法，使用时请先查阅文档

4.1 内嵌wxs 脚本

a. wxs 代码可以编写在wxml 文件中的<wxs></wxs>标签内，就像javascript 代码可以编写在 html文件中的<script></script>标签内一样；

b. wxml 文件中的每个<wxs></wxs>标签，必须提供一个 module 属性，用来指定当前<wxs></wxs>标签的模块名。在单个wxml文件内，建议其值唯一；

                    
                        //wxml
                        <wxs module='foo'>
                        var some_msg ='hello moto';
                        module.exports = {
                            msg: some_msg
                        }
                        </wxs>
                        <view>{ {foo.msg } }</view>

4.2 外联 wxs 脚本

a. wxs 代码还可以编写在以 .wxs 为后缀名的文件内，就像javascript 代码可以编写在 .js 为后缀名的文件中一样；

b. 在微信开发者工具里面，右键可以直接创建.wxs 文件，在其中直接编写 WXS 脚本；

                    
                           // /pages/tools.wxs
                            var foo ='hello moto';//定义私有变量 foo
                            var bar = function(d){//定义私有函数 bar
                                 return d
                            }
                            module.exports ={// 通过 module.exports 向外共享私有成员
                                Foo:foo,//向外共享私有变量 foo
                                bar:bar//向外共享私有函数 bar
        
                            };
                            module.exports.msg='vivi';//额外向module.exports 中挂载msg 变量

c. 在wxml 内引用外联的 wxs 脚本；

                        
                               // /pages/index/index.wxml
                               <wxs src='./../tools.wxs' module='tools'/>
                               <view> { {tools.msg} } </view>
                               <view> { {tools.bar(tools.FOO)} } </view>

5.列表渲染

1⃣️手动指定索引和当前项的变量名。

wx:for-item：可以指定数组当前元素的变量名；
wx:for-index：可以指定数组当前下标的变量名；

            
                <view wx:for="{ {array} }" wx:for-item='itemName' wx:for-index='idx'>
                   索引是 { {idx} } 当前项是：{ {itemName} }
                </view>

6.下拉刷新

enablePullDownRefresh：true；
wx.startPullDownRefresh()：调用触发下拉刷新动画，效果与用户手动下拉刷新一致；

7.上拉加载更多

    
        data:{
            page:1,
            msglist:[1,2,3,4,5,6,7,9,10]
        }
       //设置触底距离
      
       onReachBottom:function(){
           //先让页面值自增+1
           this.setDate({
               page:this.data.page+1
           })

           const newArr =[]
           for(let i =1,i<=10,i++){
               const c = (this.data.page-1)*10+i
               newArr.push(c)
           }
           this.setData({
            msglist:[...this.data.msglist, ...newArr]
           })
       }




        <view wx-for='{ {msglist} }' wx:key="*this">{ {item} }</view>

8.转发分享

onShareAppMessage(Object)

        
            //用户点击右上角分享
           onShareAppMessage:function(obj){
               console.log(obj)
           }
           
           //按钮实现转发
           <button type="primary" open-type='share' data-info='aaa'>转发</button>
           
           //自定义转发内容
           Page){
               onShareAppMessage:function(res){
                   if(res.from ==='button'){
                       //来自页面内转发按钮
                       console.log(res.target)
                   }
                   return {
                       title:'自定义转发标题',
                       path:'/pages/user?id=123',
                       imageUrl:''
                   }
               }
           }

9.页面导航

后退导航

如果要后退到上一页面或多级页面，需要把open-type 设置为 navigateBack, 同时使用delta 属性指定后退的层数

        
            //声明式导航
           <navigator open-type='navigateBack' delta='1'>
               返回上一页
           <navigator>

           //编程式导航
           <button type='warn' bindtap='btnHandler2'><button>
           btnHandler2(){
               wx.navigateBack({
                   delta:1
               })
           }

10.导航传参

1⃣️声明式导航传参

navigator 组件的 url属性用来指定导航的页面路径，同时路径后面还可以携带参数，参数与路径之间使用？分隔，参数键与参数值用= 相连，不同参数用& 分隔

    
        <navigator url=`/pages/logs/logs?name=zs&age=20`>去logs页面</navigator>

2⃣️编程式导航传参

    
        wx.navigateTo({
            url:'/pages/logs/logs?name=zs&age=20'
        })

11.组件的创建与引用

1⃣️创建组件

a.在项目的根目录中，鼠标右键，创建components->test文件夹
b.在新建的components->test文件夹上，点击创建'新建component'
c.为新建的组件命名之后，会自动生成组件对应的4个文件，后缀分别为.js,.json,.wxml和.wxss'

注意：尽量将不同的组件，存放到单独的文件夹中，从而保证清晰的目录结构

2⃣️引用组件

a.在需要引用组件的页面中，找到页面的.json 配置文件，新增 usingComponents节点
b.在usingComponents中，通过键值对的形式，注册组件；键为注册的组件名称，值为组件的相对引用路径
c.在页面的.wxml文件中，把注册的组件名称，以标签形式在页面上使用，即可把组件展示到页面上

注意：注册组件名称时，建议把名称注册为短横线连接的形式，例如vant-button或custom-button

3⃣️使用样式美化组件

12.数据监听器

数据监听器可以用于监听和响应任何属性和数据字段的变化，从而执行特定的操作。作用类似于vue 中的wacth。数据监听器从小程序2.6.1开始支持

    
        Component({
            observers:{
                '字段A，字段B':function(字段A的新值，字段B的新值){
                    //do something
                }
            }
   
        })

        //监听子数据字段的变化
        Component({
            observers:{
                'some.subfield':function(subfield){
                    //使用setData 设置 this.data.some.subfield 时触发
                    //（除此以外，使用setData 设置this.data.some也会触发）
                },
                'arr[12]':function(arr12){
                    //使用setData 设置 this.data.arr[12] 时触发
                    //（除此以外，使用setData 设置this.data.arr也会触发）
                },
                //使用通配符**监听所有子数据字段的变化
                'some.subfield.**':function(subfield){
                    //使用setData 设置 this.data.some.subfield 本身或者其下任何子数据字段时触发
                    //（除此以外，使用setData 设置this.data.some也会触发）field === this.data.some.field
                    
                }
            }
   
        })

13.WePY框架

腾讯官方出品的一个小程序快速开发框架，对原生小程序的开发模式进行了再次封装，更贴进于MVVM架构模式，并支持ES6/7的一些新特性，同时语法风格更接近于Vue.js，使用WePY 框架能够提高小程序的开发效率。

13.1.安装WePY框架

wePY 的安装或更新都通过npm 进行，全局安装或更新 WePY 命令行工具，可以在终端运行以下命令：

      
          npm install wepy-cli -g

13.2.初始化WePY项目

WePY 命令行工具安装完毕后，可以运行如下命令，初始化项目结构：

        
            wepy init standard myproject
            //myproject 为自定义的项目名称
            //创建项目的时候，要勾选EsLint选项，规范代码的风格

13.3.实时编译WePY项目

使用 wepy init 命令初始化项目后，只是得到了一个模板项目，如果想开启实时编译，得到小程序项目，步骤如下：

a.运行cd myproject 切换至 WePY 项目根目录
b.运行npm install 安装 WePY 项目依赖项
c.运行wepy build--watch 开启实时编译

注意：wepy build --wacth 命令，会循环监听 WePY 项目中源代码的变化，自动编译生成小程序项目，生成的小程序项目默认被存放于dist 目录中。

        
            wepy init standard myproject
            //myproject 为自定义的项目名称
            //创建项目的时候，要勾选EsLint选项，规范代码的风格

13.4.wpy文件的使用说明

1⃣️三大组成部分：

a.脚本部分：
b.运行npm install 安装 WePY 项目依赖项
c.运行wepy build--watch 开启实时编译