一篇笔记入门小程序

微信小程序

    项目结构

        pages：小程序页面集合，每个子目录表示一个页面

            页面例子

                index：欢迎页，小程序的首页

                logs：日志页

            页面目录结构，所有的文件名与页面名相同

                .js：页面脚本文件，即页面逻辑

                    概念

                        监听并处理页面的生命周期函数

                        获取小程序实例

                        声明并处理页面的数据

                        响应页面的交互事件

                    注册页面Page()，传入一个对象参数

                        对象参数

                            data：页面的初始数据

                                初始数据会传到渲染层（布局结构），在布局中使用{{属性名}}的方式调用

                            生命周期函数

                            页面动作相关函数

                            事件处理函数：响应渲染层的事件绑定信号

                            prototype

                                Page.prototype.route：获取当前页面的路径

                                Page.prototype.setData()：将数据从逻辑层发送到视图层，同时改变对应的this.data的值

                                    参数：传入一个对象，作为初始数据data的新值

                                        data：要改变的数据，以key，value的形式表示将this.data的key改变成value

                                        callback：回调函数，界面渲染完毕后调用

                                    在函数中调用this.setData({'属性':'新值'})

                            其它：添加任意函数或数据，使用this调用

                    文件作用域：文件中声明的变量和函数只在该文件中有效

                    模块：将公共的代码抽离成为一个单独的js文件作为一个模块

                        在模块文件里导出变量或函数

                            module.exports.sayHello = sayHello

                            exports.sayGoodbye = sayGoodbye

                        在其它js文件中导入公共模块

                            导入模块：var common = require('common.js')

                            引用模块函数或变量：common.sayHello()

                .json：页面配置文件

                    概念

                        页面配置文件会覆盖小程序的配置文件

                .wxss：页面样式表文件

                    概念

                        页面样式表会覆盖小程序的样式表

                .wxml：页面结构文件，即页面布局

                    数据绑定：引用逻辑层的data对象的属性

                        组件的内容： {{ message }}

                        组件的属性：

                        组件的控制属性：

                        关键字：

                    运算

                        三元运算：

                        算数运算： {{a + b}} + {{c}} + d

                        逻辑判断：

                        字符串运算：{{"hello" + name}}

                        数据路径运算：{{object.key}} {{array[0]}}，object,array分别为data对象的属性

                    组合：构成新的对象或数组

                        数组： {{item}}

                            最终组合成数组[0, 1, 2, 3, 4]

                        对象

                            合成对象：

                                最终组合成的对象是 {for: 1, bar: 2}

                            展开对象：扩展运算符 ... 来将一个对象展开

                               

                                    最终组合成的对象是 {a: 1, b: 2, c: 3, d: 4, e: 5}。

                                使用原来的key和value：

                                    最终组合成的对象是 {foo: 'my-foo', bar:'my-bar'}。

                            注意

                                如有存在变量名相同的情况，后边的会覆盖前面

                                花括号和引号之间如果有空格，将最终被解析成为字符串

                                    "{{[1,2,3]}} "解析为"{{[1,2,3] + ' '}}"

                    控制流程

                        循环：wx:for，为数组每个元素渲染组件

                            遍历数组

                                {{index}}: {{item.message}}

                                    array是一个对象数组，index是当前项索引名，item是当前项变量名

                            遍历数组，指定当前项索引名和变量名

                                {{idx}}: {{itemName.message}}

                                    wx:for-index：指定当前项索引名

                                    wx:for-item：指定当前项变量名

                            嵌套循环

                               

                                   

                                       

                                            {{i}} * {{j}} = {{i * j}}

                                       

                                   

                               

                            用在标签上，以渲染一个包含多节点的结构块

                                {{index}}: {{item}}

                            状态跟随：wx:key，指定列表中列表项的唯一标识符

                                使列表项的状态跟随列表项在列表位置的变化

                                注意

                                    当 wx:for 的值为字符串时，会将字符串解析成字符串数组

                                    花括号和引号之间如果有空格，将最终被解析成为字符串

                        条件：wx:if

                            判断是否需要渲染该代码块

                                True

                            多层判断

                                1

                                2

                                3

                            打包多个元素：block wx:if， 一次性判断多个标签组件

                                并不是个组件，仅仅是一个包装元素，不会渲染

                            wx:if消耗高，hidden消耗低

                    模板：在模板中定义代码，在不同地方调用

                        定义模板

                            使用标签