• 2.文件结构


    小程序包含一个描述整体程序的 app 和多个描述各自页面的 page。

    一个小程序主体部分由三个文件组成,必须放在项目的根目录,如下:

     

     

    一个小程序页面由四个文件组成,分别是:

     

    注意:为了方便开发者减少配置项,描述页面的四个文件必须具有相同的路径与文件名。

    示例目录:HelloWorld

     

    全局文件

    app.js文件

    这个是小程序的脚本代码文件,可以在这个文件上进行监听,并处理小程序的一些生命周期(比如一些全局变量)

    在这个app.js文件内,需要使用App()函数,来注册程序。

     

    演示:

    //app.js

    App({

      onLaunch: function () {

        //当小程序初始化完成时,会触发onLaunch(全局只触发一次)

      },

      onShow: function () {

      //当小程序启动,或从后台进入前台显示,会触发onShow

      },

      onHide: function () {

      //当小程序从前台进入后台,会触发onHide

      },

      onError: function (msg) {

      //当小程序发生脚本错误,或者api调用失败时,会触发onError并带上错误信息

      },

      other:function(){

    //全局函数,可以被项目上的其他js文件调用

      },

      globalData:{

    //全局对象

      },

    })

    app.json文件

    小程序的全局配置文件

    pages

    来指定小程序由哪些页面组成

    接受一个数组,每一项都是字符串。每一项代表对应页面的【路径+文件名】信息,数组的第一项代表小程序的初始页面。小程序中新增/减少页面,都需要对pages数组进行修改。

    文件名不需要写文件后缀,因为框架会自动去寻找路径.json,.js,.wxml,.wxss的四个文件进行整合。

     

    例如:

     

    {

      "pages":[

        "pages/index/index",

        "pages/logs/logs"

      ]

    }

    备注:pages内只需要写wxml文件的路径,其他文件不用写

    window

    用于设置小程序的状态栏、导航条、标题、窗口背景色

    注:HexColor(十六进制颜色值),如"#ff00ff"

    例app.json :

    {
      "window":{
        "navigationBarBackgroundColor": "#ffffff",
        "navigationBarTextStyle": "black",
        "navigationBarTitleText": "微信接口功能演示",
        "backgroundColor": "#eeeeee",
        "backgroundTextStyle": "light"
      }
    }

    tabBar

    如果小程序是一个多 tab 应用(客户端窗口的底部或顶部有 tab 栏可以切换页面),可以通过 tabBar 配置项指定 tab 栏的表现,以及 tab 切换时显示的对应页面。

    Tip:

    1. 当设置 position 为 top 时,将不会显示 icon
    2. tabBar 中的 list 是一个数组,只能配置最少2个、最多5个 tab,tab 按数组的顺序排序。

    属性说明:

     

    示例:

    {

      "tabBar": {

      "color":"#818181",

      "selectedColor":"#0082D7",

      "borderStyle":"white",

        "list": [{

          "pagePath": "pages/index/index",

          "text": "首页",

          "iconPath":"images/tabbar/index@2x.png",

          "selectedIconPath":"images/tabbar/index_selected@2x.png"

        }, {

          "pagePath": "pages/me/me",

          "text": "设置",

          "iconPath":"images/tabbar/me@2x.png",

          "selectedIconPath":"images/tabbar/me_selected@2x.png"

        }]

      }

    }

    networkTimeout

    
    

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

    示例:

    {

      "networkTimeout": {

        "request": 10000,

        "downloadFile": 10000

      }

    }

    debug

    可以在开发者工具中开启 debug模式,在开发者工具的控制台面板,调试信息以 info的形式给出,其信息有Page的注册,页面路由,数据更新,事件触发 。 可以帮助开发者快速定位一些常见的问题。

    示例:

    {

      "debug": false

    }

    
    

    app.wxss文件

    定义全局的样式

    基本上与css差不多,这里不用多讲


    **************************分割线********************

    一个页面的内部

    xxx.js

    逻辑主函数

    Page({

    })

    示例代码:

    //index.js
    Page({
      data: {
        text: "This is page data."
      },
      onLoad: function(options) {
        // Do some initialize when page load.
      },
      onReady: function() {
        // Do something when page ready.
      },
      onShow: function() {
        // Do something when page show.
      },
      onHide: function() {
        // Do something when page hide.
      },
      onUnload: function() {
        // Do something when page close.
      },
      onPullDownRefresh: function() {
        // Do something when pull down.
      },
      onReachBottom: function() {
        // Do something when page reach bottom.
      },
      onShareAppMessage: function () {
       // return custom share data when user share.
      },
      onPageScroll: function() {
        // Do something when page scroll
      },
      onTabItemTap(item) {
        console.log(item.index)
        console.log(item.pagePath)
        console.log(item.text)
      },
      // Event handler.
      viewTap: function() {
        this.setData({
          text: 'Set some data for updating view.'
        }, function() {
          // this is setData callback
        })
      },
      customData: {
        hi: 'MINA'
      }
    })
     

    初始化数据

    
    

    初始化数据将作为页面的第一次渲染。data 将会以 JSON 的形式由逻辑层传至渲染层,所以其数据必须是可以转成 JSON 的格式:字符串,数字,布尔值,对象,数组。

    
    

    渲染层可以通过 WXML 对数据进行绑定。

    
    

    示例代码:

    
    
    <view>{{text}}</view>
    <view>{{array[0].msg}}</view>
    
    
    
    Page({
      data: {
        text: 'init data',
        array: [{msg: '1'}, {msg: '2'}]
      }
    })
    
    

    生命周期函数

    
    
    • onLoad: 页面加载

      • 一个页面只会调用一次,可以在 onLoad 中获取打开当前页面所调用的 query 参数。
    • onShow: 页面显示

      • 每次打开页面都会调用一次。
    • onReady: 页面初次渲染完成

      • 一个页面只会调用一次,代表页面已经准备妥当,可以和视图层进行交互。
      • 对界面的设置如wx.setNavigationBarTitle请在onReady之后设置。详见生命周期
    • onHide: 页面隐藏

      • navigateTo或底部tab切换时调用。
    • onUnload: 页面卸载

      • redirectTonavigateBack的时候调用。
    
    

    生命周期的调用以及页面的路由方式详见

    
    

    onLoad参数

    
    
    类型说明
    Object 其他页面打开当前页面所调用的 query 参数
    
    

    页面相关事件处理函数

    
    
    • onPullDownRefresh: 下拉刷新

      • 监听用户下拉刷新事件。
      • 需要在app.jsonwindow选项中或页面配置中开启enablePullDownRefresh
      • 当处理完数据刷新后,wx.stopPullDownRefresh可以停止当前页面的下拉刷新。
    • onReachBottom: 上拉触底

      • 监听用户上拉触底事件。
      • 可以在app.jsonwindow选项中或页面配置中设置触发距离onReachBottomDistance
      • 在触发距离内滑动期间,本事件只会被触发一次。
    • onPageScroll: 页面滚动

      • 监听用户滑动页面事件。
      • 参数为 Object,包含以下字段:


    onShareAppMessage: 用户转发
    • 只有定义了此事件处理函数,右上角菜单才会显示“转发”按钮
    • 用户点击转发按钮的时候会调用
    • 此事件需要 return 一个 Object,用于自定义转发内容

    
    

    示例代码

    Page({
      onShareAppMessage: function () {
        return {
          title: '自定义转发标题',
          path: '/page/user?id=123'
        }
      }
    })
    

    事件处理函数

    除了初始化数据和生命周期函数,Page 中还可以定义一些特殊的函数:事件处理函数。在渲染层可以在组件中加入事件绑定,当达到触发事件时,就会执行 Page 中定义的事件处理函数。

    示例代码:

    <view bindtap="viewTap"> click me </view>
    
    Page({
      viewTap: function() {
        console.log('view tap')
      }
    })

    xxx.wxml

    使用微信提供的组件来代替html元素

    xxx.wxss

    小程序样式,与css样式基本相似,这里不重复论述

    在当前页面的wxss文件内编辑的css样式,只能使用在当前页面

    xxx.json

    每一个小程序页面也可以使用.json文件来对本页面的窗口表现进行配置。 页面的配置比app.json全局配置简单得多,只是设置 app.json中的 window配置项的内容,页面中配置项会覆盖 app.json的 window中相同的配置项。

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

  • 相关阅读:
    matlab的矩阵基础
    matlab基础运算
    【转】Android设置虚线、圆角、渐变
    DialogFragment 自定义弹窗
    imeOptions 属性详解
    android fragment 博客 学习记录
    【转】android fragment 博客 学习
    android UI库
    【转】 Android自定义捕获Application全局异常
    vitamio 缓冲一部分时,loading还没消失,直接点击播放,loading未能消失
  • 原文地址:https://www.cnblogs.com/kai-z/p/8479672.html
Copyright © 2020-2023  润新知