小程序入门学习—hello world

最新推荐文章于 2023-10-17 16:35:41 发布

Vinson武

最新推荐文章于 2023-10-17 16:35:41 发布

阅读量362

点赞数

分类专栏：小程序

本文链接：https://blog.csdn.net/Wengwuhua/article/details/83450876

版权

小程序专栏收录该内容

3 篇文章 0 订阅

订阅专栏

简易教程

起步准备

申请账号: 开发小程序首先需要在官网申请一个账号，通过这个帐号你就可以管理你的小程序。点击连接填写相应信息就可以申请小程序账号。在这个小程序管理平台，你可以管理你的小程序的权限，查看数据报表，发布小程序等操作。申请成功后，登录 https://mp.weixin.qq.com ，我们可以在菜单 “设置”-“开发设置” 看到小程序的 AppID 了。小程序的 AppID 相当于小程序平台的一个身份证，很多地方要用到。
安装开发工具：点击开发工具下载根据系统下载安装包。安装成功后打开小程序开发者工具，用微信扫码登录开发者工具就可以开始小程序开发之旅了。

第一个Hello World小程序

打开开发工具新建项目选择小程序项目，选择代码存放的硬盘路径，填入刚刚申请到的小程序的 AppID，给项目起一个好听的名字，最后，勾选 “创建 QuickStart 项目” （注意: 要选择一个空的目录才会有这个选项），点击确定，你就得到了你的第一个小程序了，点击顶部菜单编译就可以在微信开发者工具中预览你的第一个小程序。

小程序代码结构

我们建立第一个小程序的时候，可以看到项目中生成了4种不同的文件，分别是：
.json 后缀的 JSON 配置文件
.wxml 后缀的 WXML 模板文件
.wxss 后缀的 WXSS 样式文件
.js 后缀的 JS 脚本逻辑文件
在这里插入图片描述

json配置文件
这个文件主要用于设置一些页面配置，每个页面的配置对该页面起作用，比如page.json就是配置page页面的样式等，如果和全局配置重复会以此页面的配置为准。app.json 是当前小程序的全局配置，包括了小程序的所有页面路径、界面表现、网络超时时间、底部 tab 等。Hello World小程序的app.json配置如下：这个文件主要用于设置一些页面配置，每个页面的配置对该页面起作用，比如page.json就是配置page页面的样式等，如果和全局配置重复会以此页面的配置为准。app.json 是当前小程序的全局配置，包括了小程序的所有页面路径、界面表现、网络超时时间、底部 tab 等。Hello World小程序的app.json配置如下：

{
  "pages":[
    "pages/index/index",
    "pages/logs/logs"
  ],
  "window":{
    "backgroundTextStyle":"light",
    "navigationBarBackgroundColor": "#fff",
    "navigationBarTitleText": "WeChat",
    "navigationBarTextStyle":"black"
  }
}

pages字段 —— 用于描述当前小程序所有页面路径，这是为了让微信客户端知道当前你的小程序页面定义在哪个目录。数组的第一项代表小程序的初始页面（首页）。小程序中新增/减少页面，都需要对 pages 数组进行修改。
window字段 —— 定义小程序所有页面的顶部背景颜色，文字颜色定义等。
（页面的.json只能设置 window 相关的配置项，以决定本页面的窗口表现，所以无需写 window 这个键。）

工具配置 project.config.json：小程序开发者工具在每个项目的根目录都会生成一个 project.config.json，你在工具上做的任何配置都会写入到这个文件，当你重新安装工具或者换电脑工作时，你只要载入同一个项目的代码包，开发者工具就自动会帮你恢复到当时你开发项目时的个性化配置，其中会包括编辑器的颜色、代码上传时自动压缩等等一系列选项。

WXML 模板
相当于前端开发中的Html（也相当于Android中的页面xml配置文件），和HTML 非常相似，WXML 也是由标签、属性等等构成，可以理解WXML就是微信为了小程序开发而制定的一个html标准。他们的不同之处在于：

标签名字有点不一样：往往写 HTML 的时候，经常会用到的标签是 div, p, span，小程序的 WXML 用的标签是 view, button, text 等等，这些标签就是小程序给开发者包装好的基本能力
多了一些 wx:if 这样的属性以及 {{ }} 这样的表达式：在网页一般开发中我们往往需要在JS中直接控制DOM，从而响应用户的行为。这样代码会充斥着非常多的界面交互逻辑和程序的各种状态变量，显然这不是一个很好的开发模式，因此就有了 MVVM 的开发模式（例如 React, Vue），提倡把渲染和逻辑分离。简单来说就是不要再让 JS 直接操控 DOM，JS 只需要管理状态即可，然后再通过一种模板语法来描述状态和界面结构的关系即可。小程序中就是用了这个思路，比如要把Hello World显示在界面上，我们是这样写的：
WXML中：

<text>{{msg}}</text>

JS中只需管理状态

this.setData({ msg: "Hello World" })

通过 {{ }} 的语法把一个变量绑定到界面上，称为数据绑定。仅仅通过数据绑定还不够完整的描述状态和界面的关系，还需要 if/else, for等控制能力，在小程序里边，这些控制能力都用 wx: 开头的属性来表达。

WXSS 样式
相当于前端开发中的CSS，WXSS 具有 CSS 大部分的特性，小程序在 WXSS 也做了一些扩充和修改。

新增了尺寸单位。在写 CSS 样式时，开发者需要考虑到手机设备的屏幕会有不同的宽度和设备像素比，采用一些技巧来换算一些像素单位。WXSS 在底层支持新的尺寸单位 rpx ，小程序底层来换算即可，由于换算采用的浮点数运算，所以运算结果会和预期结果有一点点偏差。
提供了全局的样式和局部样式：例如hello world项目中的app.wxss和page.wxss
WXSS 仅支持部分 CSS 选择器

JS 交互逻辑
在小程序里边，我们就通过编写 JS 脚本文件来处理用户的操作。

<view>{{ msg }}</view>
<button bindtap="clickMe">点击我</button>

点击 button 按钮的时候，我们希望把界面上 msg 显示成 “Hello World”，于是我们在 button 上声明一个属性: bindtap ，在 JS 文件里边声明了 clickMe 方法来响应这次点击操作：

Page({
  clickMe: function() {
    this.setData({ msg: "Hello World" })
  }
})

在JS中可以通过小程序丰富的API调用很多微信提供的能力。

小程序的启动

微信客户端在打开小程序之前，会把整个小程序的代码包下载到本地。
紧接着通过 app.json 的 pages 字段就可以知道你当前小程序的所有页面路径:

{
  "pages":[
    "pages/index/index",
    "pages/logs/logs"
  ]
}

写在 pages 字段的第一个页面就是这个小程序的首页（打开小程序看到的第一个页面）。
小程序启动之后，在 app.js 定义的 App 实例的 onLaunch 回调会被执行:

App({
  onLaunch: function () {
    // 小程序启动之后 触发
  }
})

整个小程序只有一个 App 实例，是全部页面共享的。

程序与页面
一个页面的代码其实包含4个文件，微信客户端会首先根据xx.json配置生成一个也页面，界面的顶部的文字颜色等都可以在这里配置，接着会装载xx.wxml结构和xx.wxss样式，最后会装载 xx.js。比如 log.js的结构大致如下：

Page({
  data: { // 参与页面渲染的数据
    logs: []
  },
  onLoad: function () {
    // 页面渲染后 执行
  }
})

Page 是一个页面构造器，这个构造器就生成了一个页面。在生成页面的时候，小程序框架会把 data 数据和 log.wxml 一起渲染出最终的结构，于是就得到了你看到的小程序的样子。在渲染完界面之后，页面实例就会收到一个 onLoad 的回调，你可以在这个回调处理你的逻辑。

组件
小程序提供了很多类似html中div、p等的标签组件，如显示地图只需写<map></map>标签。使用组件的时候，还可以通过属性传递值给组件，让组件可以以不同的状态去展现<map longitude="广州经度" latitude="广州纬度"></map>小程序提供了很多类似html中div、p等的标签组件，如显示地图只需写<map></map>标签。使用组件的时候，还可以通过属性传递值给组件，让组件可以以不同的状态去展现<map longitude="广州经度" latitude="广州纬度"></map>
组件的内部行为也会通过事件的形式让开发者可以感知，例如用户点击了地图上的某个标记，你可以在 js 编写 markertap 函数来处理：
<map bindmarkertap="markertap" longitude="广州经度" latitude="广州纬度"></map>
API
为了让开发者可以很方便的调起微信提供的能力，例如获取用户信息、微信支付等等，小程序提供了很多 API 给开发者去使用。需要注意的是：多数 API 的回调都是异步，所以要注意处理好代码逻辑的异步问题。