微信小程序初探

2019-05-14 本文已影响94人 Ice_spring

微信小程序是微信官方于 2017 年发布的一种不需要下载安装即可使用的应用，它实现了应用“触手可及”的梦想，用户通过扫一扫、搜索或单击分享链接的方式即可打开应用，这也体现了“用完即走”的理念，用户不用关心是否安装太多应用的问题。应用将无处不在，随时可用，但又无需安装卸载。

进行微信小程序开发，须有自己的微信开发者账号，
微信小程序注册点这里
填写必要信息后了，下载开发工具，安装即可，笔者下载的是开发版，为稳定考虑也可下载稳定版。

下载开发工具

打开开发工具，新建项目，命名为helloIce

创建项目

项目名称：开发者可根据项目自定义一个项目名称。
AppID：每个小程序账号都有一个 AppID，小程序管理员可在微信公众平台查看自己的 AppID。AppID 必须填实际的小程序 AppID，否则部分功能将无法使用。如果开发者条件暂时受限，无法注册申请小程序 ID，可以选择 AppID 下方的测试号新建小程序，但是无法实现真机调试功能。
项目目录：项目目录为项目代码包存放的路径地址，建议选择自己创建的文件夹。
开发模式：选择小程序即可
后端服务：选择不使用云服务即可
开发语言：选择“JavaScript”

AppID需要进入前面注册的开发者页面

AppIDg

粘贴AppID后点击新建，会有一个基本功能的小程序。页面基本如下，在这里我们可以看到一些相关文件，对一些文件进行修改可以得到我们想要的结果

基本功能

开发者工具界面，从上到下，从左到右，分别为：菜单栏、工具栏、模拟器、编辑器、调试器五大部分。

开发工具界面组成

可以通过点击左上角组件决定是否显示该组件。如编写代码不着急调试时可以关闭不显示调试器

关闭调试器

项目配置文件
新建小程序时，都会自动生成一个项目配置文件，即项目根目录下的
project.config.json 文件，项目配置文件中主要通过定义项目名
称、AppID 等内容来对项目进行配置。

项目配置
主体文件
一个小程序的主体文件有三个文件组成，均以 app 为前缀，必须放在项目的根目录下

主体文件

app.js 为系统的方法处理全局文件，也就是说文件中规定的函数和数据，在整个小程序中，每一个框架页面和文件都可以使用 this 获取。每个小程序都会有一个app.js 文件，有且只有一个，位于项目的根目录。
app.json : 该文件用来对微信小程序进行全局配置，决定页面文件的路径、窗口表现、设置网络超时时间、设置多 tab 等。
app.wxss：app.wxss文件是小程序的全局样式文件，作用于每一个页面，其中，WXSS (WeiXinStyle Sheets)是一套样式语言，用于描述 WXML 的组件样式。该文件是可选文件，如果没有全局样式规定，可以省略不写。

我们可以到app.json中修改相应配置，获得效果，相应设置及其属性可以在小程序官方文档中查看，这里是window设置，window 属性主要用于设置小程序的状态栏、导航栏、标题与窗口背景颜色

Windows
比如修改

window
可以发现导航栏标题和背景色变了

window效果
tabBar属性
如果小程序是一个多 tab 应用（客户端窗口的底部或顶部有 tab 栏可以切换页面），可以通过 tabBar 配置项指定 tab 栏的表现，以及 tab 切换时显示的对应页面。

tabBar
在app.json中添加tabBar相关代码

tabBar
可以看到在小程序页面底部的效果

tabBar效果
pages及页面文件
上面主文件app.json和app.wxss是全局样式，如果在pages页面类文件中修改了这些属性，则app中不会生效。
页面文件

下篇将学习页面文件相关知识。