微信小程序基础介绍

微信小程序基础介绍

什么是微信小程序？

微信小程序本质上就是一个计算机软件程序，不同与APP，它依赖与微信平台，可以理解为是嵌套在微信平台中的一个APP。

微信小程序的优缺点

优点

• 不需要安装，省去了安装的麻烦
• 体积小，节省手机空间
• 使得手机桌面更加简洁
• 可以依靠微信平台传播、获取客户，节省了推广成本
• 开发周期短，节省了开发成本
• 开发门槛相对较低
• 连接线上线下，给生活带来了便利…

缺点

• 微信小程序整个体系依赖于微信
• 推送消息有诸多限制
• 小程序不能承载用户的所有需求

与其他相关概念的区别

与H5的区别

本质上是两种不同的东西：小程序是计算机程序，H5则是互联网网页

对用户而言，在微信中使用小程序，会比H5流畅很多

对开发者而言，相比H5，小程序可以节省大量的服务器资源

与公众号、订阅号、服务号、企业微信的区别

公众号：能被公众看到的信息平台。范围最广，包括了订阅号、服务号、企业微信和微信小程序

订阅号：是用户在微信中订阅文章所使用的公众账号。

服务号：是一种服务导向的公众账号。

注意：订阅号和服务号以【聊天界面】为基础，它们的功能和界面早就规定好了的

企业微信：一般为企业所有，受众一般是这个企业的员工。

小程序：可简单理解成嵌入微信的app，如果你想快速的开发一个应用，并且这个应用的功能没有很复杂，可以考虑使用小程序。

注意：小程序允许开发者自定义界面，不用局限于微信的聊天界面。

微信小程序开发

1.下载安装微信小程序开发工具

2.代码结构：

• pages：包含两个目录：index、logs，小程序包含的页面

  • 每个页面都有一个独立的文件夹

  • 每个页面包含了4个文件：js页面逻辑，json页面配置，wxss页面样式，wxml页面结构

  • 页面样式可覆盖全局样式（页面样式的优先级更高），页面配置可覆盖全局配置

• utis：工具类

• app.js：全局逻辑处理文件

• app.json：全局配置文件

• app.wxss：全局样式文件

• project.config.json：整个项目的配置文件

• sitemap.json：：用来配置小程序及其页面是否允许被微信索引

注意：app.js,app.json,app.wxss放置在项目的根目录下，作为全局文件，是小程序的框架配置文件。

小程序的页面组成

一个页面由4个文件所组成，涉及到3个技术：WXML,WXSS,JS

1. WXML

微信标记语言

类似于HTML，用于描述页面结构。

WXML和HTML最大的差异在于标签。大部分的HTML标签都被所替代，最接近于HTML里的

逻辑分块的标签。

WXML语法：

数据绑定：在wxml中使用变量，然后在js中给变量赋值

条件渲染：

<view wx:if="{{var<10}}">hello,world!</view><!--需要在js中定义一个变量var-->
<view wx:elif="{{var<6}}">yangdaxain</view>
<view wx:else>xiaoluo</view>

事件绑定：onclick、mousemove等

2. WXSS

微信样式表
注意：

3. JS

JavaScript 用于处理页面和用户的交互。小程序的逻辑功能使用JS来实现。

JS常见的数据类型：

数字：JS的数字类型不区分整数和浮点数，统一用Number表示

字符串：以单引号或双引号括起来的任意文本

布尔值：true/false

数组：[data1,data2,…datan]

JS对象：{key1:value1,key2:value2,…keyn:valuen}