初入小程序

什么是小程序?

小程序是一个不需要下载安装就可以使用的一个应用，它实现了应用触手可及的梦想，用户扫一扫或者搜一下即可打开应用。也体现了用完即走的理念，用户不用关心是否安装太多应用的问题。应用将无处不在，随时可用，但又无需安装卸载。

在介绍小程序的时候，一般都会用APP进行对比分析，用APP来理解小程序很形象，小程序对很多人来说是个陌生的新物种，但是APP大家都熟悉。

因此，可以将小程序理解为一个轻便的APP。

​网页开发者在开发网页的时候，只需要使用到浏览器，并且搭配上一些辅助工具或者编辑器即可。小程序的开发则有所不同，需要经过申请小程序帐号、安装小程序开发者工具、配置项目等等过程才可完成。

申请账号

进入 小程序注册 填写相关的信息,小程序是用邮箱注册的,所以会给邮箱发消息。

当然, 已经注册过的小伙伴可以直接 登录

登录进去就进入小程序后台了

然后找到 开发, 点 开发管理 点 开发设置, 把 AppID 复制下来, 下图为例:

小程序的 AppID 相当于小程序平台的一个身份证，后续你会在很多地方要用到 AppID。

有了小程序帐号之后，我们需要一个工具来开发小程序。

安装开发者工具

点击 下载开发者工具,根据自己的操作系统下载安装对应的安装包进行安装。

安装完成后点开发者工具, 微信扫码进入, 在手机上确认, 准备开发第一个小程序吧!

创建小程序

把那会儿复制的AppID粘贴上, 这里模板使用初始模板, 然后语言有两种 : JavaScript 跟 TypeScript 用那种都可以, 最后点击右下角那个绿油油的新建按钮。

目录结构

• app.json
  当前小程序的全局配置,包括了小程序的所有页面路径、界面表现、网络超时时间、底部 tab 等。
• app.js
  小程序的逻辑。
• app.wxss
  小程序的全局样式, 作用于当前小程序的所有页面。
• project.config.json
  个性化配置, 例如界面颜色, 编译配置等。
• sitemap.json
  配置小程序页面是否被微信索引。

编写小程序页面

• .wxml
  用来描述网页结构
• .wxss
  用来描述网页样式
• .js
  对页面的一些逻辑性的操作。比如 点击事件等。
• .json
  对页面的一些配置项。

导航栏配置

• pages字段: 用于描述当前小程序所有页面路径，这是为了让微信客户端知道当前你的小程序页面定义在哪个目录 (有先后顺序问题) 。
• window字段:定义小程序所有页面的顶部背景颜色，文字颜色定义等。

window属性	类型	默认值	描述
backgroundTextStyle	String	dark	下拉 loading 的样式，仅支持 dark / light
navigationBarBackgroundColor	HexColor	#000000	导航栏背景颜色
navigationBarTitleText	string		导航栏标题
navigationBarTextStyle	string	default	导航栏样式，仅支持以下值 : default 默认样式, custom 自定义导航栏

感兴趣的同学可以去 小程序官网 查看。

底部导航配置

  "tabBar": {
    "list": [
      {
        "pagePath": "pages/index/index",
        "text": "首页"
      },
      {
        "pagePath": "pages/logs/logs",
        "text": "日志"
      }
    ]
  },

创建模板

<!-- name给当前模板添加标记 -->
<template name="a">
  <text> 我是a模板 </text>
</template>
<view>
  <text>我是模板外面的内容</text>
</view>

获取模板内容

<!-- is: 根据模板的name值来 显示 -->
<import src="/pages/templates/a.wxml"/>
<template is="a"></template>

<!-- 获取模板外面的内容 -->
<include src="/pages/templates/a.wxml"/>

总结

小程序开发一定要多看 官方文档 ,因为小程序版本更新有点频繁。