source/_posts/wx_program

小程序代码构成

  1. JSON配置
    1. app.json
    • 小程序的全局配置
    • 包括所有页面路径 界面表现 网络超时时间 底部tap 
      1
      2
      3
      4
      5
      6
      7
      8
      9
      10
      11
      12
      13
      {
        "pages":[
          "pages/index/index"
          "pages/logs/logs"
        ],

        "window":{
          "backgroundTextStyle":"light",
          "navigationBarBackgroundColor":"#fff",
          "navigationBarTitleText":"Weixin",
          "navigationBarTextStyle":"black"
        }
      }
      1. project.config.json
    • 在工具上做的任何配置都会直接写入到这个文件
    • 重新安装工具或更换电脑 只需要载入同一个项目的代码包 会自动恢复配置
      1. page.json
    • 用来表示pages/logs目录小的logs.json这类和小程序页面相关的配置
      1. JSON语法
    • 数据格式
    1. 数字
    2. 字符串
    3. Bool值
    4. 数组
    5. 对象
    6. Null
    7. 无法使用注释
  2. WXML模板
    和HTML相似
  3. WXSS样式
    和CSS相似
  4. JS逻辑交互

小程序宿主环境

  • 渲染层 和 逻辑层

    1. WebView进行渲染 每个界面一个线程
    2. JsCore运行脚本

  • 程序与界面

    1. 微信各护短在打开小程序之前 会将整个小程序的代码包下载到本地
    2. 通过app.json的pages字段知道你当前小程序的所有页面路径
    3. 小程序启动 app.js定义的App实例会调用onLaunch
    4. 先根据logs.json配置生成一个界面 顶部颜色和文字都可以在这个json文件内定义好
      然后客户端装载 WXML结构和WXSS样式
      最后装载logs.js Page页面构造器生成了一个页面

  • 组件
    小程序提供丰富的组件
    <map><\map> 在界面显示地图

  • API
    可以调用微信提供的能力 获取用户信息 微信支付
    调用微信扫一扫能力等

小程序配置

  • app.json文件用来对微信小程序进行全局配置

  • 配置项

    1. entryPagePath 小程序默认启动首页
    2. pages 页面路径列表 必须
    3. window 全局的默认窗口表现
    4. tabBar 底部tab栏的表现
    5. networkTimeout 网络超时时间
    6. debug 是否开启调试
    7. functionalPages 是否启用插件功能页
    8. subpackages 分包结构配置
    9. workers worker代码放置的目录
    10. requireBackgroundModes 需要在后台使用的能力 如音乐播放
    11. requirePrivateInfos 调用的地理位置相关隐私接口
    12. plugins 使用到的插件
    13. preloadRule 分包预下载
    14. resizable PC小程序是否支持用户任意窗口大小改变
    15. usingComponents 全局自定义组件配置
    16. permission 小程序接口全线相关设置
    17. sitemapLocation 指明sitemap.json的位置
    18. style 指定使用升级后的weui样式
    19. useExtendedLib 指定需要引用的扩展库
    20. entranceDeclare 微信消息用小程序打开
    21. darkmode 小程序支持DarkMode
    22. themeLocation 之名theme.json的位置
    23. lazyCodeLoading 配置自定义组件代码按需注入
    24. supportedMaterials 聊天素材小程序打开相关配置
    25. serviceProviderTicket 定制化型服务商票据
    26. embeddedAppldList 半屏小程序
    27. halfPage 视频号直播半屏场景设置
    28. debugOptions 调试相关配置
    29. enablePassiveEvent touch失眠监听是否为passive
    30. resolveAlias 自定义模块映射规则
    31. renderer 全局默认的渲染后端
    32. renderer 渲染后端选项
    33. componentFramework 组件框架
    34. miniApp 多端模式场景接入身份管理服务时开启小程序授权页相关配置
    35. static 正常情况下默认所有资源文件都被打包发布到所有平台
      可以通过static字段配置特定每个目录/文件只能发布到特定的平台
    36. convertRpxToVw 配置是否将rpx单位转为vw单位

  • page.json
    页面配置 单个页面的.json文件会对app.json中相同的配置覆盖掉

  • 配置项

    1. navigationBarBackgroundColor
    2. navigationBarTextStyle
    3. navigationBarTitleText
    4. navigationBarStyle
    5. homeButton
    6. backgroundColor
    7. backgroundColorContent
    8. backgroundTExtStyle
    9. backgroundColorTop
    10. backgroundColorBottom
    11. enablePullDownRefresh
    12. onReachBottomDistance
    13. pageOrientation
    14. disableScroll
    15. usingComponents
    16. initialRenderingCache
    17. style
    18. singlePage
    19. restartStrategy
    20. handleWebviewPreload
    21. visulEffectlnBackground
    22. enablePassiveEvent
    23. renderer
    24. rendererOptions
    25. componentFramework

  • sitemap配置
    通过sitemap.json配置 或者管理后台页面收录开关来配置其小程序是否允许被微信搜索

    • 配置项
      rules 索引规则列表
      属性：
    1. action
    2. page
    3. params
    4. matching
      exact
      inclusive
      exclusive
      partial
    5. priority

  • 场景值
    ID 说明
    1000 其他
    1001 发现小程序
    1002 微信首页顶部搜素框的搜索结果页
    1011 扫描二维码
    1012 长按识别二维码
    1013 扫描手机相册中的二维码
    1019 微信钱包
    1025 扫描一维码

框架接口

小程序App

  1. App(Object obj)
    注册小程序 接受一个Object参数 用于指定小程序的生命周期回调

  • 必须在app.js中调用 只能调用一次

  • 参数： 1. onLaunch function 监听小程序初始化

  1. onShow function 监听小程序启动或切入前台

  2. onHide function 监听小程序切后台

  3. onError function 错误监听函数

  4. onPageNotFound function 页面不存在监听函数

  5. onUnhandledRejection function 未处理的Promise拒绝时间监听函数

  6. onThemeChange function 监听系统主题变化

  7. 其他

  8. AppObject getApp(Object object)
    获取到小程序全局唯一的App实例

-参数

  1. allowDefault 在App为定义时返回默认实现

页面Page

  1. Page(Object obj)
    注册小程序中的一个页面
  • 参数

  1. data 页面初始化数据

  2. options 页面的组件选项

  3. behaviors

  4. onLoad 生命周期回调 监听页面加载

  5. onShow 生命周期回调 监听页面显示

  6. onReady 监听页面初次渲染完成

  7. onHide 监听页面隐藏

  8. onUnload 监听页面卸载

  9. onRouteDone 监听路由动画完成

  10. onPullDownRefresh 简体用户下拉动作

  11. onReachBottom 页面上拉触底事件的处理函数

  12. onShareAppMessage 用户点击右上角的转发

  13. onShareTimeLine 用户点击右上角转发到朋友圈

  14. onAddToFavorites

  15. onPageScroll

  16. onResize

  17. onTabItemTap

  18. onSaveExitState

  19. 其他

  20. PageObject[] getCurrentPages()
    获取当前页面栈 数组中第一个元素为首页 最后一个元素为当前页面

  21. Router
    页面路由器对象 可以用过this.pageRouter 或
    tthis.router获得当前页面或自定义组件的路由器对对象

  • 方法
  1. switchTab
  2. reLaunch
  3. redireactTo
  4. navigateTo
  5. navigateBack

自定义组件

  1. Component(Object object)
    创建自定义组件，接受一个Object参数
  • 参数 字段
  1. porperties 对外属性
  2. data 组件的内部数据
  3. observers 组件数据字段监听器
  4. methods 组件的方法
  5. behaviors
  6. created 组件生命周期函数
  7. attached