小程序学习笔记

1.开发工具下载地址:https://mp.weixin.qq.com/debug/wxadoc/dev/devtools/download.html?t=2018313

2.项目所有格式文件

            .json 后缀的 JSON 配置文件

            .wxml 后缀的 WXML 模板文件

            .wxss 后缀的 WXSS 样式文件

            .js 后缀的 JS 脚本逻辑文件

3.app.json 是对当前小程序的全局配置,包括了小程序的所有页面路径、界面表现、网络超时时间、底部 tab 等.

包含所有配置的app.json文件:

        {

            //设置页面路径,每一项代表对应页面的【路径+文件名】信息,数组第一项代表程序的初始页面

                "pages": [

                           "pages/index/index", 

                            "pages/logs/index"

                ],

                //设置默认页面的窗口表现

                 "window": {

                            "navigationBarTitleText":"Demo"

                    },

                    //设置底部 tab 的表现

                   "tabBar": {

                            "list": [

                                            {"pagePath":"pages/index/index","text":"首页"},                                                                            {"pagePath":"pages/logs/logs","text":"日志"}

                              ]

                     },

                    //设置网络超时时间

                    "networkTimeout": {

                                                  "request":10000,"downloadFile":10000

                       },

                        //设置是否开启 debug 模式

                        "debug":true

            }

4.app.json文件window节点配置说明

        navigationBarBackgroundColor:导航栏背景颜色,默认"#000000"

        navigationBarTextStyle:导航栏标题颜色(默认white),仅支持 black/white

        navigationBarTitleText:导航栏标题文字内容

        navigationStyle:导航栏样式,仅支持default/custom(默认default)。custom 模式可自定义导航栏,只保留右上角胶囊状的按钮,只在 app.json 中生效。开启 custom 后,低版本客户端需要做好兼容。开发者工具基础库版本切到 1.7.0(不代表最低版本,只供调试用) 可方便切到旧视觉

        backgroundColor:窗口的背景色,默认#ffffff 

        backgroundTextStyle:下拉背景字体、loading 图的样式(默认 dark), 仅支持 dark/light

        backgroundColorTop:顶部窗口的背景色(默认 #ffffff),仅 iOS 支持

        backgroundColorBottom:底部窗口的背景色(默认 #ffffff),仅 iOS 支持

        enablePullDownRefresh:是否开启下拉刷新,默认false

        onReachBottomDistance:页面上拉触底事件触发时距页面底部距离,单位为px,默认50px

5.app.json文件中tabBar配置说明:

        color:tab 上的文字默认颜色,必填项

        selectedColor:tab 上的文字选中时的颜色,必填    

        backgroundColor:tab的背景色,必填

        borderStyle:tabbar上边框的颜色, 仅支持 black/white,非必填,默认 black

        list:tab 的列表,最少2个、最多5个 tab,必填,数组中的每个项都是一个对象,其属性值如下:

                 pagePath:页面路径,必须在 pages 中先定义

                 text:tab上字体

                 iconPath:图片路径,icon 大小限制为40kb,建议尺寸为 81px * 81px,当 postion 为 top 时,此参数无效,不支持网络图片

                selectedIconPath:选中时的图片路径,icon 大小限制为40kb,建议尺寸为 81px * 81px ,当 postion 为 top 时,此参数无效

        position:可选值 bottom、top,非必填,默认bottom

6.app.json文件中networkTimeout节点配置说明

        可以设置各种网络请求的超时时间

        request:wx.request的超时时间,单位毫秒,默认为:60000

        connectSocket:wx.connectSocket的超时时间,单位毫秒,默认为:60000

        uploadFile:wx.uploadFile的超时时间,单位毫秒,默认为:60000

        downloadFile:wx.downloadFile的超时时间,单位毫秒,默认为:60000

7.page.json文件对本页面的窗口表现进行配置,且只能配置window相关的配置项,因此page.json文件中无需写window这个键

8.模块化的公共js文件只有通过 module.exports 或者 exports 才能对外暴露接口,更推荐采用 module.exports 来暴露模块接口

        例如:

                // common.js

                function  sayHello(name){

                    console.log(`Hello${name}!`)

                }

                function  sayGoodbye(name){

                    console.log(`Goodbye${name}!`)

                }

                //推荐采用 module.exports 来暴露模块接口

                module.exports.sayHello = sayHello

                exports.sayGoodbye = sayGoodbye

    ​在需要使用这些模块的js文件中,使用 require(path) 将公共代码引入(require 暂时不支持绝对路径)

    例如:

            //other.js

            //将公共代码引入

            var common = require('common.js')

            Page({ 

                 helloMINA:function(){ 

                         common.sayHello('MINA') 

                 },

                 goodbyeMINA:function(){ 

                         common.sayGoodbye('MINA') 

                 }

            })

9.WXML的引用

        WXML 提供两种文件引用方式import和include

        import和include的区别:

            1>.import 有作用域的概念,即只会 import 目标文件中定义的 template,而不会 import 目标文件 import 的 template,如:C import B,B import A,在C中可以使用B定义的template,在B中可以使用A定义的template,但是C不能使用A定义的template

              示例代码:

            2>.include 可以将目标文件除了