小程序

小程序学习笔记 文件结构

Posted by fsoooo Blog on April 10, 2018

项目文件

  • app.js 小程序的脚本代码，监听处理小程序的生命周期函数、申明全局变量、调用框架提供的API等等

    1. App();函数注册一个小程序
    2. onLaunch();程序初始化完成时触发，全局指触发一次
    3. onShow(options);启动或从后台进入前台显示时触发
    4. onHide();从前台进入后台会触发
    5. onError(msg);脚本错误或API调用失败会触发，并带上错误信息
    6. getUserInfo(){};获取用户信息，需要先调用wx.login();
    7. wx.login({});调用微信登录接口，获取登录凭证(code)，进而获取用户登录信息，包括用户的唯一标识(openid)，及本次登录的会话密钥(session_key)。用户数据的加解密通讯需要密钥来完成。

  • app.json 搜对整个小程序的全局配置：配置小程序是由哪些页面组成，配置小程序的窗口背景色，配置导航条样式，配置默认标题。

    1. ”pages”: [],配置页面路由
    2. “window”:{}设置默认页面的窗口表现

  • app.wxss 是整个小程序的公共样式表我们可以在页面组件的class上直接使用app.wxss中申明的样式规则

  • 创建页面

    1. *.js 文件 ：脚本文件 — 在这个文件中我们可以监听并处理页面的生命周期函数、获取小程序实例，声明并处理数据，响应页面交互事件等。
    2. *.json 文件 ：配置文件 — 页面的配置文件是非必要的。当有页面的配置文件时，配置项在该页面会覆盖 app.json 的 window 中相同的配置项。如果没有指定的页面配置文件，则在该页面直接使用 app.json 中的默认配置。
    3. *.wxss 文件 ：页面样式文件
    4. *.wxml 文件 ：页面结构文件

文件结构

  1. 配置：

    • app.json
      1. ```js
        1. ”pages”: [] 设置页面路径
        2. “window”: { //设置默认窗口的表现(颜色都是十六进制的) “navigationBarBackgroundColor”: #000, //导航栏背景颜色 “navigationBarTextStyle”: white/black, //导航栏标题颜色，仅支持black/white “navigationBarTitleText”: string, //导航栏标题 “backgroundColor”: #fff, //窗口的背景颜色 “backgroundTextStyle”: dark, //下拉背景字体、loading 图的样式，仅支持 dark/light “enablePullDownRefresh”: boolean //是否开启下拉刷新,详见页面相关事件处理函数。 }
        3. “tabBar”: { //设置底部的tab “color”: #ddd, //tab上文字的默认颜色 “selectedColor”: #333, //选中tab时的颜色 “backgroundColor” #ccc, //tab背景颜色 “borderStyle”: black/white, //tabBar上边框的颜色，仅支持black/white “list”: [ //tab 的列表 { “pagePath”: ‘../..’, //pages中定义的页面路径 “text”: string, //tab上的按钮文字 “iconPath”: ‘../..’, //图片路径，icon 大小限制为40kb，建议尺寸为 81px * 81px，当 postion 为 top 时，此参数无效 “selectedIconPath”: ‘../..’ //选中时的图片路径，icon 大小限制为40kb，建议尺寸为 81px * 81px ，当 postion 为 top 时，此参数无效 } ], “position”: top/bottom // }
        4. “networkTime”: { //网络超时时间 “request”: 10 000, //wx.request 的请求超时时间，默认60 000(下面都是) “connectSocket”: 10 000, //wx.connectSocket的超时时间 “uploadFile”: 10 000, //wx.uploadFile的超时时间 “downloadFile”: 10 000, //wx.downloadFile的超时时间 }
        5. “debug”: boolean 是否开启debug模式 ```

    • page.json :页面的.json只能设置 window 相关的配置项，以决定本页面的窗口表现，所以无需写 window 这个键

    • 属性如下：

      { 
“navigationBarBackgroundColor”: #000, 
“navigationBarTextStyle”: black/white, 
“navigationBarTitleText”: string, 
“backgroundColor”: #ddd, 
“backgroundTextStyle”: dark/light, 
“enablePullDownRefresh”: boolean, 
“disableScroll”: boolean //设置为 true 则页面整体不能上下滚动；只在 page.json 中有效，无法在 app.json 中设置该项(默认 false ) 
}

      逻辑层

注册程序：App(options);

App() 函数用来注册一个小程序。接受一个 object 参数，其指定小程序的生命周期函数等。

options = {
        onLaunch: function(){},     //生命周期函数--监听小程序初始化(只会触发一次)  
        onShow: function(){},       //生命周期函数--监听小程序显示(每次显示小程序都会触发)  
        onHide: function(){},       //生命周期函数--监听小程序隐藏(每次小程序从前台进入后台都会触发)  
        onError: function(msg){},      //当小程序发生脚本错误，或者 api 调用失败时，会触发 onError 并带上错误信息    
        userFun:function(){}        //用户自定义函数   
    }

问题： 

  1. onLaunch 和 onShow 的参数 
    • path: string 打开小程序的路径 
    • query： {} 打开小程序的query 
    • scene: number 打开小程序的场景值 
    • shareTicket: string ??? 
  2. getApp()函数：获取小程序实例 
    • console.log(getApp().globalData); 
    • App()必须在app.js中注册，并且不能注册多个 
    • 不要再App()内部使用getApp(),用this即可 
    • 不要再onLaunch时调用getCurrentPage(),此时page还没有生成 
    • 通过getApp()获取实例后，不要随意调用生命周期函数 ？？？？？？

注册页面

Page(options) 函数用来注册一个页面。接受一个 object 参数，其指定页面的初始数据、生命周期函数、事件处理函数等。

options = {
        data: {},   // 页面的初始数据  
        onLoad: function(){},
        onReady: function(){},      //生命周期函数--监听页面初次渲染完成    
        onShow: function(){},
        onHide: function(){},
        onUnload: function(){},     //生命周期函数--监听页面卸载  当redirectTo或navigateBack的时候调用。  
        onPullDownRefresh: function(){},        //页面相关事件处理函数--监听用户下拉动作  
        onReachButton： function(){},        //页面上拉触底事件的处理函数 
        onShareAppMessage: function(){},    //用户点击右上角转发 
        route: string,      //当前页面的路径   
        userFun:function(){}
    }

更改data中的数据需要用到this.setData(key: value);方法，否则不会生效

页面路由

  • 页面栈：

    1. 页面栈以栈（先进后出）的形式维护页面与页面之间的关系；
2. 小程序提供了getCurrentPages()函数获取页面栈，第一个元素为首页，最后一个元素为当前页面。
3. 使用wx.navigateTo每新开一个页面，页面栈大小加1,直到页面栈大小为5为止；
4. 使用wx.navigateTo重复打开界面,页面栈大小加1,直到页面栈大小为5为止；
5. 使用wx.redirectTo重定向,当前页面被替换，页面栈不变，如果新页面之前打开过，则得到的是两个状态独立的同一页面
6. 使用wx.navigateBack返回，当delta为1，等同于左上返回按钮，页面栈减一；当delta为2，关闭依次五级页面和四级页面，当前页面为三级页面，页面栈大小减2；以此类推，直到栈底为止，也就是首页。

  • 哪些情况会触发页面跳转

    1. 小程序启动，初始化第一个页面

    2. 打开新页面，调用 API wx.navigateTo 或使用组件

          wx.navigateTo({
        //目的页面地址，原页面保留
        url: 'pages/logs/index',
        success: function(res){},
        ...
    })

    3. 页面重定向，调用 API wx.redirectTo 或使用组件

          wx.redirectTo({
        //目的页面地址，原页面被关闭，不可返回
        url: 'pages/logs/index',
        success: function(res){},
        ...
    })

          <navigator url="pages/logs/index" hover-class="navigator-hover">跳转</navigator>
    // 当该组件添加redirect属性时，等同于wx.redirectTo接口；默认redirect属性为false，等同于wx.navigateTo接口。

    4. 页面返回，调用 API wx.navigateBack或用户按左上角返回按钮

          wx.navigateBack({
        delta: 1
    })
    // delta为1时表示返回上一页，为2时表示上上一页，以此类推；如果dalta大于已打开的页面总数，则返回到首页。返回后，元界面会销毁。

    5. tarbar切换 页面全部出栈，只留下新的 Tab 页面

    6. 重加载 页面全部出栈，只留下新的 Tab 页面

  • 如何正确使用页面跳转: 官方规定小程序最多只能有五个页面同时存在，意思是在不关闭页面的情况，最多新开五个页面，页面深度为5。

    1. 对于可逆操作，使用wx.navigateTo,比如从首页跳转到二级页面，从二级页面返回是不需要重新渲染首页
    2. 对于不可逆操作，使用wx.redirectTo,比如用户登录成功后，关闭登录页面，不能返回到登录界面。
    3. 对于一些介绍性等不常用页面wx.redirectTo或wx.navigatrBack
    4. 对于类似九宫格、列表项，使用
    5. 不要在首页使用wx.redirectTo，这样会导致应用无法返回首页
    6. 简化需求、简化流程；核心功能在两三个页面完成便是张小龙追求『小而美』的体现

  • getCurrentPages()： 用于获取当前页面栈的实例，以数组形式按栈的顺序给出，第一个元素为首页，最后一个元素为当前页面。

  • 注意：

      1. navigateTo, redirectTo 只能打开非 tabBar 页面。
  2. switchTab 只能打开 tabBar 页面。
  3. reLaunch 可以打开任意页面。
  4. 页面底部的 tabBar 由页面决定，即只要是定义为 tabBar 的页面，底部都有 tabBar。
  5. 调用页面路由带的参数可以在目标页面的onLoad中获取。

  • 模块化

  • 文件作用域

    1. 在js文件中申明的函数只在该文件中有效，
    2. 通过全局的getApp()函数可以获得全局的应用实例：
        //app.js
    App({
        globalData: 1
    })
    // index.js
    var app = getApp();
    app.globalData ++;
    // logs.js
    console.log(getApp().globalData);

  • 模块化

    1. 我们可以将一些公共的代码抽离成为一个单独的 js 文件，作为一个模块。模块只有通过 module.exports 或者 exports(不推荐使用) 才能对外暴露接口。
    2. 小程序目前不支持直接引入 node_modules , 开发者需要使用到 node_modules 时候建议拷贝出相关的代码到小程序的目录中。
    3. 在需要使用这些模块的文件中，使用 require(path) 将公共代码引入
        // common.js
    function sayHello(name){
        console.log(\`hello ${name} !\`)
    }
    function sayBye(name){
        console.log(\`Goodbye ${name} !\`)
    }
    module.exports.sayHello = sayHello;
    exports.sayBye = sayBye;
    // index.js中调用  
    var comm = require(../common.js);
    Page({
        helloJack:function(){
            comm.sayHello("Jack");
        },
        goodByeRose: function(){
            comm.sayBye("Rose");
        }
    })
CATALOG
    FEATURED TAGS
    前端 编程 PHP Laravel Vue 小程序 生活 随笔 品格 成长 历史 岁月 读书 情感 亲情 修行
    FRIENDS