微信小程序-学习笔记

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.列表渲染 

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

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

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

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>