微信小程序(一)--微信小程序的介绍

OGeek|极客世界-中国程序员成长平台 › 门户 › 编程› 移动开发›小程序云开发高级教程

原作者: [db:作者] 来自: [db:来源] 收藏邀请

一.微信小程序简介
　　小程序是一种不需要下载安装即可使用的应用，它实现了应用“触手可及”的梦想，用户扫一扫或者搜一下即可打开应用。也体现了“用完即走”的理念，用户不用关心是否安装太多应用的问题。应用将无处不在，随时可用，但又无需安装卸载。
二.小程序界面结构
　　在成功创建一个微信小程序项目之后,在根目录下存在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 }