02——微信小程序官方demo讲解——app部分

第一节讲了目录结构,这节主要讲解下目录中app.js部分。

它由三部分组成app.js、app.json与app.wxss

1.JS部分

1.1概述

//app.js
App({
  onLaunch: function () {
    // 展示本地存储能力
    var logs = wx.getStorageSync(‘logs‘) || []
    logs.unshift(Date.now())
    wx.setStorageSync(‘logs‘, logs)

    // 登录
    wx.login({
      success: res => {
        // 发送 res.code 到后台换取 openId, sessionKey, unionId
      }
    })
    // 获取用户信息
    wx.getSetting({
      success: res => {
        if (res.authSetting[‘scope.userInfo‘]) {
          // 已经授权,可以直接调用 getUserInfo 获取头像昵称,不会弹框
          wx.getUserInfo({
            success: res => {
              // 可以将 res 发送给后台解码出 unionId
              this.globalData.userInfo = res.userInfo

              // 由于 getUserInfo 是网络请求,可能会在 Page.onLoad 之后才返回
              // 所以此处加入 callback 以防止这种情况
              if (this.userInfoReadyCallback) {
                this.userInfoReadyCallback(res)
              }
            }
          })
        }
      }
    })
  },
  globalData: {
    userInfo: null
  }
})

说明:一个项目有且仅有一个app模块。该模块中

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

app中可以指定四个周期onLaunch、onShow、onHide、onError。

其中。全局的 getApp() 函数可以用来获取到小程序实例。

其中除了可以设置上面四个生命周期函数外,还可以配置其他自定义属性。作为这个app的全局变量。例如

App({
   myObj: {} //其他页面中都可以获取到该变量
})

1.2场景值

由于一个小程序可以从众多入口中进入,比如最近联系人列表中下拉时出现的菜单,以及小程序模块中搜索小程序,所以每次进入小程序的时候都会携带一个id。小程序中这个id的术语叫场景值,这个场景值可以从app中的onLaunch,或者onShow函数中获取。

2.JSON部分

{
  "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
}

解释:

pages:该app下有哪些页面,是一个数组,每一项对应一个页面路径。其中第一项为首页。

windows:可以对页面进行一些颜色配置。如图所示:

tabbar,可选项。用于定义主页面下方的tabbar。

networkTimeout:用于设置网络请求超时时间。

常用的就这些。

3.WXSS部分

该部分定义应用级别的样式,类似于web开发中的common.css。

只要定义在这里的样式。可以在任务和一个页面下访问。

4.一些技巧:

4.1 可以在app.js中的onLaunch中利用wx的api。监听网络变化,以提示用户网络环境的变化。比如没网了。有网了之类的。

4.2 待续。

原文地址:https://www.cnblogs.com/whiteHome/p/8595373.html

时间: 2024-10-08 03:08:40

02——微信小程序官方demo讲解——app部分的相关文章

03——微信小程序官方demo讲解——page部分

一个page由一个文件夹以及文件夹下四个文件组成. 比如一个页面叫index.则需要在pages目录下新建一个index目录,且包含由index+类型(js\wxml\wxss\json)为名组成的若干文件.文件名格式为硬性要求. 1.JS部分 1.1概述 Page({ data: { logs: [] }, onLoad: function () { this.setData({ logs: (wx.getStorageSync('logs') || []).map(log => { retu

01——微信小程序官方demo讲解——文件结构

1.环境概览 首先环境配置的部分略过,打开小程序开发工具.选择一个空目录,即可开始一个demo项目. 其中新建成功后的目录如图所示: 2.文件结构描述 如图所示,左边是界面展示,右边是目录结构. 目录大体分为3部分:app部分.pages部分.其他部分. app主要放置一些全局性的变量以及配置.就相当于浏览器中的windows.node中的global. pages中放的是一个一个的页面.一个页面由一个文件夹组成,文件夹内由四部分组成,js,wxml,wxss,json. 其中js主要是该页面的

Mac上微信小程序官方开发工具卡死的问题

Mac上微信小程序官方开发工具打开后卡死,无法操作,也关不掉,解决方案: 三步: 1.在应用中删除"微信web开发者工具" 2.删除一下几个配置和缓存文件: 1.-/Library/Application Support/微信web开发者工具 2.~/Library/Preferences/com.tencent.wechat.devtools.plist 3.~/Library/Caches/微信web开发者工具 3.重新安装"微信web开发者工具"

weapp微信小程序初探demo

https://github.com/donglegend/weapp-demo 参考文档开发工具安装微信weapp API git项目源码微信小程序 demo效果展示效果预览

02微信小程序-轮播的宽度100%显示和轮播的基础配置

1==>如何让轮播的宽度100%显示? 你先给swiper 外面添加一个大盒子,给大盒子一个类 . <view class='lunbobox'> 然后wxss 里面设置 image , width: 100%; 在设置大盒子的宽度 width: 100%; 这样就可以了. <view class='lunbobox'> <!-- 轮播开始 --> <swiper indicator-dots="{{indicatorDots}}" ci

微信小程序开发交流与推广

一.请加微信群: 请扫描下方的二维码加“微信小程序交流推广群”,由于微信群的限制,超过 100 人就不能扫码加群,大家可以先添加微信号:us9488 并备注“微信小程序”,然后拉你入群. 二.官方文档: 微信小程序介绍 微信小程序设计指南 微信小程序开发文档 微信小程序运营规范 微信小程序开发者社区 三.微信小程序解决方案: 微信小程序会话管理场景 微信小程序文件上传下载应用场景 微信小程序WebSocket长连接应用场景 微信小程序视频应用场景 四.代码: 会话管理场景 文件上传下载应用场景

微信小程序导航:官方工具+精品教程+DEMO集合+最新资讯

10月15日更新: 官方手册在线版及本地版 W3C微信小程序使用手册:http://www.w3cschool.cn/weixinapp/wgt21q8k.html微信小程序官方开发文档chm版下载 :http://wxapp.dreawer.com/forum.php?mod=viewthread&tid=44微信小程序开发帮助手册:http://wxapp.dreawer.com/forum.php?mod=viewthread&tid=45 10月14日更新: 免费视频集合: 微信小

5款微信小程序开发工具使用报告,微信官方开发工具还有待提升

微信小程序已经内测有一段时间了,笔者本着好奇加学习的心态写了几个小demo,虽然在MINA框架上并没有遇到太多的坑,但官方开发工具实在不敢恭维. api提示不全,要一个个查api啊,写代码超级慢啊 很多必备的快捷键都没有,比如全选关键字.快速复制一行等等 颜色主题不能选?不喜欢白色风格怎么搞 没有插件 没有插件 没有插件 重要的事情说三遍 无奈笔者走上了尝试各种IDE的旅途,现在说一下笔者对于IDE的需求或者设想: 轻量级:我不喜欢那种类似Eclipse的庞然大物,即使出现类似工具我也不会去使用

微信小程序开发者工具包(官方版)

1月9日,微信小程序上线,用户现在可以通过二维码.搜索等方式体验到开发者们开发的小程序.值得一提的是,小程序提供了显示在聊天顶部的功能,这意味着用户在使用小程序的过程中可以快速返回至聊天界面,而在聊天界面也可快速进入小程序,实现小程序与聊天之间的便捷切换.用户使用过的小程序,将以列表的方式呈现在小程序TAB中. 下面话不多说:微信小程序开发者工具包下载地址 好了!工具在这里了!大家可能会问,这工具怎么用啊!别急!其实微信公众号官方它是有教程的.因为太多!这里我就不多说了. 我把网址放在下面,大家