zoukankan      html  css  js  c++  java
  • 微信小程序

    PART   1

    一个小程序主体部分由三个文件构成:app.js(小程序逻辑,必要)、app.json(小程序公共配置,必要)、app.wxss(小程序公共样式表,不必要)

    微信现已开放小程序内搜索,小程序根目录下的sitemap.json文件用来配置小程序及其界面是否允许被微信索引文件内容如下:

    eg1:所有页面都会被微信索引(默认情况)

    {
      "rules":[{
        "action": "allow",
        "page": "*"
      }]
    }

    eg2:path/to/page页面不被索引,其余页面允许被索引

    {
      "rules":[{
        "action": "disallow",
        "page": "path/to/page"
      }]
    }

    eg3:path/to/page页面允许被索引,其余页面不被索引

    {
      "rules":[{
        "action": "allow",
        "page": "path/to/page"
      },{
        "action": "disallow",
        "page": "*"
      }]
    }

    eg4:包含a和b参数的path/to/page页面会被微信优先索引,其他页面都会被索引

    {
      "rules":[{
        "action": "allow",
        "page": "path/to/page",
        "params": ["a", "b"],
        "matching": "inclusive"
      }, {
        "action": "allow",
        "page": "*"
      }]
    }

    一个小程序由四个文件组成:js(页面逻辑,必要)、wxml(页面结构,必要)、json(页面配置,不必要)、wxss(页面样式表,不必要)

    小程序中app.json文件用来对小程序进行全局配置,决定页面文件的路径、窗口表现、设置网络超时、设置多tab等。

    {

      "pages": [  //页面中所有文件的目录都要在此声明

        "pages/index/index",

        "pages/logs/index"

      ],

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

        "navigationBarTitleText": "Demo"

      },

      "tabBar": {   //小程序的导航栏,该对象中有首页、日志两个导航栏

        "list": [{

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

          "text": "首页"

        }, {

          "pagePath": "pages/logs/logs",

          "text": "日志"

        }]

      },

      "networkTimeout": {  //小程序中各类网络的超时时间

        "request": 10000,

        "downloadFile": 10000

      },

      "debug": true,  //小程序的调试工具

      "navigateToMiniProgramAppIdList": [   //需要跳转的小程序列表

        "wxe5f52902cf4de896"

      ]

    }

    PART   2

           每个小程序都需要在app.js中调用APP方法注册小程序示例,绑定生命周期回调函数、错误监听和页面不存在监听函数等等。

    App({

         onload   //监听页面加载

         onShow   //监听页面显示

         onReady  //监听页面初步渲染完成

         onHide   //监听页面隐藏

    }) …

           整个小程序只有一个APP实例,是全部页面共享的,可以通过getApp方法获得全局唯一的APP实例,获取APP上的数据或调用开发者注册在APP上的函数。

           路由方式:

    打开新页面:<navigator open-type="navigateTo">< navigator />

    页面重定向:<navigator open-type="redirectTo">< navigator />

    页面返回:<navigator open-type="navigateBack">< navigator />

    Tab切换:<navigator open-type="switchTab">< navigator />

    重启动:<navigator open-type="reLaunch">< navigator />

    navigateTo, redirectTo 只能打开非 tabBar 页面。

    switchTab 只能打开 tabBar 页面。

    reLaunch 可以打开任意页面。

    页面底部的 tabBar 由页面决定,即只要是定义为 tabBar 的页面,底部都有 tabBar。

    调用页面路由带的参数可以在目标页面的onLoad中获取。

    PART   3

    模块化:模块通过module.exports对外暴露接口,在需要使用这些模块化的文件中,使用require将公共代码引入

    eg:  //common.js

           function sayHello(name) {

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

    }

    module.exports.sayHello = sayHello

    //需要这些模块的文件中,使用require将公共代码引入

    var common = require(‘common.js’)

    Page({

           helloMINA: function() {

    common.sayHello(‘MINA’)

    }

    })

    bind事件绑定不会阻止冒泡事件向上冒泡,catch事件绑定可以阻止冒泡事件向上冒泡

    PART   4

    小程序中不支持动态执行js代码,即不支持使用eval执行JS代码,不支持使用new Function创建函数

    组件生命周期,最重要的生命周期是created、attached、detached

    组件实例刚刚被创建好时,created生命周期被触发。此时,组件数据this.data就是在Component构造器中定义的数据data。此时还不能调用setData。通常情况下,这个生命周期只应该用于给组件this添加一些自定义属性字段

    在组件完全初始化完毕、进入页面节点树后,attached生命周期被触发。此时,this.data已经被初始化为组件的当前值。这个生命周期很有用,绝大多数初始化工作可以在这个实际进行。

    在组件离开页面节点树后,detached生命周期被触发。退出一个页面时,如果组件还在页面节点树种,则detached会被触发。

    PART   5

    微信小程序中的点击事件

    ①    bindtap和catchtap

    bindtap不会阻止事件的冒泡,但catchtap会阻止事件冒泡

    ②    事件event(e)

    currentTarget:当前组件

    target:事件源组件

    currentTarget.dataSet:数据

    ③    输入框绑定输入事件bindinput

    <input placeholder = ‘请输入信息’ bindinput = ‘input’/>

    取出当前输入框的值

    this.setData({ expressNu:event.detail.value })

  • 相关阅读:
    获取时间对象
    定时器
    undefined与return
    获取设置非行间样式
    NaN
    return,break与continue的区别
    数据类型
    程序的机器级表示
    计算机内数字的表示
    计算机系统漫游
  • 原文地址:https://www.cnblogs.com/fanfan0916/p/11169690.html
Copyright © 2011-2022 走看看