zoukankan      html  css  js  c++  java
  • 微信小程序(一)--微信小程序的介绍

    一.微信小程序简介
      小程序是一种不需要下载安装即可使用的应用,它实现了应用“触手可及”的梦想,用户扫一扫或者搜一下即可打开应用。也体现了“用完即走”的理念,用户不用关心是否安装太多应用的问题。应用将无处不在,随时可用,但又无需安装卸载。
    二.小程序界面结构
      在成功创建一个微信小程序项目之后,在根目录下存在app.json(配置文件),app.js(逻辑文件),app.wxss(样式文件).文件夹pages为界面相关文件所在类,pages/index为默认的首页(index)所在文件夹,其中index.js(逻辑文件),index.json(配置文件),index.wxml(结构文件),index.wxss(样式文件):

    --观察根目录下app.json文件:

    --在windows中,定义设置了导航栏的样式:
      backgroundTextStyle:   设置背景文字颜色,默认只能设置为dark和light
      navigationBarBackgroundColor: 设置导航栏背景颜色
      navigationBarTitleText:  设置导航栏的标题
      navigationBarTextStyle:  设置导航栏文字颜色,默认只能设置为black和white
    --在pages中设置路径:
      "pages/index/index":寻找的是pages/index/index页面链接
      "pages/logs/logs":寻找的是pages/logs/logs页面链接
    --在微信官方开发文档中给出了其他可以自定义设置的配置属性信息:点击此处跳转官方文档
    --自定义配置tabBar:

    --在成功配置后,我们可以发现在页面模拟器中进行页面切换:

     --app.js文件相关描述

     1 //app.js
     2 var obj = {
     3   onLaunch: function () {
     4     // 展示本地存储能力
     5     var logs = wx.getStorageSync('logs') || []
     6     logs.unshift(Date.now())
     7     wx.setStorageSync('logs', logs)
     8 
     9     // 登录
    10     wx.login({
    11       success: res => {
    12         // 发送 res.code 到后台换取 openId, sessionKey, unionId
    13       }
    14     })
    15     // 获取用户信息
    16     wx.getSetting({
    17       success: res => {
    18         if (res.authSetting['scope.userInfo']) {
    19           // 已经授权,可以直接调用 getUserInfo 获取头像昵称,不会弹框
    20           wx.getUserInfo({
    21             success: res => {
    22               // 可以将 res 发送给后台解码出 unionId
    23               this.globalData.userInfo = res.userInfo
    24 
    25               // 由于 getUserInfo 是网络请求,可能会在 Page.onLoad 之后才返回
    26               // 所以此处加入 callback 以防止这种情况
    27               if (this.userInfoReadyCallback) {
    28                 this.userInfoReadyCallback(res)
    29               }
    30             }
    31           })
    32         }
    33       }
    34     })
    35   },
    36   globalData: {
    37     userInfo: null
    38   }
    39 };
    40 //调用了一个APP方法(全局方法)
    41 App(obj);

    --app.js文件在小程序运行时就会被加载,我们可以在该文件下方添加console.log()方法来验证该类的加载,在该类中主要作用是调用了一个App()全局方法,调用此方法的作用就是用来创建应用程序实例对象.定义应用程序的生命周期事件;在app.wxss中,定义了一些css样式属性.
    --在pagex/index中,存在index.js文件主要是完成页面的逻辑,功能的实现;在index.wxml中则是进行界面定义,和html相似,但是是严格遵循XML语法的,在index.wxss中定义界面的样式,使用的是CSS语法,但是区别于CSS提供了更加方便的rpx单位(可以解决手机屏幕显示碎片化的问题).index.json文件,可以用来重写app.json中window中的属性样式,来调整页面的某些属性(只能设置windows当中的属性);
    三.小程序的配置
      在开发小程序的时候,通常都需要自定义小程序的标题导航来,底部导航栏等等界面设置,因此我们需要进行小程序的配置,我们可以在app.json中进行配置,也可以在每个页面的json文件中进行配置.
    --配置app.json文件,该文件遵循JSON语法,可以进行导航来样式和组成的相关配置..

     1 {
     2   "pages": [
     3     "pages/index/index",
     4     "pages/logs/logs",
     5     "pages/demo/demo"
     6   ],
     7   "window": {
     8     "backgroundTextStyle": "light",
     9     "navigationBarBackgroundColor": "#ccc",
    10     "navigationBarTitleText": "微信小程序",
    11     "navigationBarTextStyle": "black"
    12   },
    13   "tabBar": {
    14     "list": [
    15       {
    16         "pagePath": "pages/index/index",
    17         "text": "首页"
    18       },
    19       {
    20         "pagePath": "pages/demo/demo",
    21         "text": "自定义"
    22       },
    23       {
    24         "pagePath": "pages/logs/logs",
    25         "text": "日志"
    26       }
    27     ]
    28   },
    29   "sitemapLocation": "sitemap.json",
    30   "style": "v2",
    31   "debug":true
    32 }

    --在开启debug日志后,将会打印程序开发阶段的日志文件信息,方便我们测试调优.
    --配置底部导航栏(标签栏)

  • 相关阅读:
    电脑声卡驱动正常但是没有声音怎么办 电脑声卡坏了怎么办
    关于很怂地退回SDK,ndk,gradle版本这件事。。。(降版本fix项目异常)
    升级ndk后Android studio的build错误
    《jdk10》删除javah.exe文件,在Android studio编译jni,使用jdk10生成头文件
    解决okhttp的java.lang.IllegalStateException: closed错误
    E/MediaPlayer: start called in state 4, mPlayer(0xcc719a40)解决
    Android studio3.1的XML布局文件没有自动提示不全代码功能
    在纳德拉的带领下微软开始了新的征途
    可称之为“伟大”的公司
    [转]利用Docker构建开发环境
  • 原文地址:https://www.cnblogs.com/skykuqi/p/11728141.html
Copyright © 2011-2022 走看看