微信小程序基础入门

一，小程序介绍

小程序是什么？

• 小程序是一种新的开放能力，开发者可以快速地开发一个小程序。小程序可以在微信内被便捷地获取和传播，同时具有出色的使用体验。

• 任何一个普通的开发者，经过简单的学习和练习后，都可以轻松地完成一个小程序的开发和发布。

• 微信小程序的优势和劣势

  优势

• 微信助理，容易推广。在微信中，小程序拥有众多入口，例如附近的小程序、小程序码、分享、发现-小程序等五十多个的入口。这些入口有助于企业更好的获取流量，从而进行转化、变现。

• 使用便捷。用户在使用小程序时，只需要轻轻点一下就可以使用，更加符合用户对使用方便、快捷的需求，所以小程序的用户数量不断增加。

• 体验良好，有接近原生app的体验。在微信生态里，小程序在功能和体验上是可以秒杀掉 H5 页面的，H5 页面经常出现卡顿、延时、加载慢、权限不足等原因，而这些问题在小程序里都不会出现。

• 成本更低，从开发成本到运营推广成本，小程序的花费仅为APP的十分之一，无论是对创业者还是传统商家来说都是一大优势。

不足

• 需要像app一样审核上架，这点相对于H5的发布要麻烦一些。

• 处处受微信限制。例如不能直接分享到朋友圈，涉及到积分，或者虚拟交易的时候，小程序也是不允许的。

• 单个包大小限制为2M，这导致无法开发大型的应用，采用分包最大是16M（这个值一直在变化，以官网为准）。

官方文档

二. 小程序的申请和创建流程

账号的申请

下载开发工具

三. 项目的目录结构

• pages:
  1. wxml: 编写小程序界面结构的地方
  2. wxss: 编写小程序样式的地方
  3. json：编写界面配置的地方
  4. js：编写界面逻辑的地方
• utils: 编写工具类的地方
• app.js：创建程序实例的位置
• app.json: 编写全局配置地方
• app.wxss: 编写全局样式的地方
• project.config.json: 项目的配置文件
• sitemap.json：配置哪些网站可以被检索到

四，小程序模板语法WXML

WXML 全称是 WeiXin Markup Language，是小程序框架设计的一套标签语言，结合小程序的基础组件、事件系统，可以构建出页面的结构。

标签的使用

在小程序中没有H5提供的那些标签了，这里我们需要使用小程序给我们提供的组件。小程序给我们提供的标签很多，这里我们就介绍几个常用的，剩下的大家可以结合文档使用。

view标签是我们开发过程中最常用的标签了，这个就相当于Html中的div。

text标签也是我们开发中常用的，这个相当于Html中的span

image标签相当于我们Html中的img。

…

剩下的大家可以结合官方文档使用

官方文档

数据绑定

用户界面呈现会因为当前时刻数据不同而有所不同，或者是因为用户的操作发生动态改变，这就要求程序的运行过程中，要有动态的去改变渲染界面的能力。

在 Web 开发中，开发者使用 JavaScript 通过Dom 接口来完成界面的实时更新。在小程序中，使用 WXML 语言所提供的数据绑定功能，来完成此项功能。

数据定义

在界面对应的JS文件中的data属性上定义数据

  data: {
msg:"hello world",
num: 18,
  },

引用数据

通