入门微信小程序

发布时间:2019-07-03 发布网站:脚本宝典
脚本宝典收集整理的这篇文章主要介绍了入门微信小程序脚本宝典觉得挺不错的,现在分享给大家,也给大家做个参考。

简介

  • 是什么
    一套用来开发在微信中运行的手机app框架
  • 组成结构
    图层wXMl、样式文件wxss、逻辑层js、配置文件json

    clipboard.png

全局配置

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

  • 示例

      {
        "pages": [
          "pages/index/index",
          "pages/LOGs/logs",
          "pages/klass/klass",
        ],
        "window": {
          "backgroundTextStyle": "light",
          "navigationBarBackgroundColor": "#1aad16",
          "navigationBarTextStyle": "black"
        },
        "tabBar": {
          "color": "black",
          "selectedColor": "#129763",
          "list": [
            {
              "text": "首页",
              "pagePath": "pages/index/index"
            },
            {
              "text": "修改班级",
              "pagePath": "pages/klass/klass"
            }
          ]
        }
        "debug": true
      }

    pages页面路径
    window 页面的窗口表现
    tabBar 底部菜单栏
    debug 是否开启debug模式,debug模式下控制台会打印出详细调试信息

  • 效果

    clipboard.png

@H_785_126@更多关于app.json,详细见官方文档

路由

1. navigator

oPEn-type的属性值

   navigate 跳转到 (默认属性)
   swITchTab 以tab(菜单栏)方式切换页面
   reLaunch 重新加载url页面,顶部不会出现回退按钮
   
  • 示例

            <!-- open-type的默认值为navigate -->
            <navigator url='/pages/personal/personal'>跳转到修改个人信息界面</navigator>
            <!-- open-type设置属性值为reLaunch -->
            <navigator url='/pages/password/password' open-type='reLaunch' >跳转到修改密码界面</navigator>
            <!-- open-type的默认值为switchTab -->
            <navigator url='/pages/klass/klass' open-type='switchTab'>跳转到修改班级界面</navigator>

    open-type默认属性,顶部会出现回退样式:

    入门微信小程序

    open-type设置属性值为reLaunch,顶部不会出现回退样式:

    入门微信小程序

    open-type设置属性值为switchTab(*要实现以tab方式切换页面,在app.json中要配合写上tab的配置项):

    入门微信小程序

2.使用API进行导航跳转(实现按钮点击跳转)

navigate对应wx.navigateTo(OBJECT) 跳转到
switchTab对应 wx.switchTab(OBJECT) 跳转到某个tab
reLaunch对应 wx.reLaunch(OBJECT) 重新加载

  • 示例

    index.js

    入门微信小程序

    index.wxML

    入门微信小程序

入门微信小程序

关于navigator 的更多属性值可在官方文档查阅

脚本宝典总结

以上是脚本宝典为你收集整理的入门微信小程序全部内容,希望文章能够帮你解决入门微信小程序所遇到的问题。

如果觉得脚本宝典网站内容还不错,欢迎将脚本宝典推荐好友。

本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。