微信小程序基础介绍

清风与我

已于 2023-03-08 10:26:54 修改

阅读量4.6k

点赞数 19

分类专栏：小程序文章标签：微信小程序小程序微信

于 2023-03-08 10:22:32 首次发布

本文链接：https://blog.csdn.net/weixin_62897746/article/details/129397676

版权

小程序专栏收录该内容

2 篇文章 1 订阅

订阅专栏

前言：
一、什么是微信小程序
二、微信小程序的发展历史
三、微信小程序的优缺点
四、与其他相关概念的区别
- 与H5的区别
- 与公众号、订阅号、服务号、企业微信的区别
五、小程序的环境
六、初始化项目
七、小程序单位
八、导航栏配置
九、模板引用
十、网络请求
总结：

前言：

微信小程序自2016年1月11日开始发展至今，已经成立我们的日常生活中不可或缺的一部分，那么本篇文章我们也根据官方的文档，来了解一下微信小程序是怎么一回事。

一、什么是微信小程序

微信小程序，简称小程序，英文名 Mini Program，是一种不需要下载安装即可使用的应用，它实现了应用“触手可及”的梦想，用户扫一扫或者搜一下即可打开应用。也体现了“用完即走”的理念，用户不用关心是否安装太多应用的问题。应用将无处不在，随时可用，但又无需安装卸载。对于开发者而言，小程序开发门槛相对较低，难度不及APP，能够满足简单的基础应用，适合生活服务类线下商铺以及非刚需低频应用的转换。

整个小程序所有分包大小不超过 8M
单个分包/主包大小不能超过 2M

二、微信小程序的发展历史

2016年1月11日，微信之父张小龙公布微信小程序
2016年9月21日，微信小程序正式开启内测
2017年1月9日，第一批小程序正式上线
2017年12月28日，微信更新的 6.6.1 版开放了小游戏，微信启动页面推荐了小游戏《跳一跳》，可以通过小程序找到已经玩到小游戏
2018年1月25日，微信团队在“微信公众平台”发布公告称，“从移动应用分享至微信的小程序页面，用户访问时支持打开来源应用。

三、微信小程序的优缺点

优点
1. 不需要安装，省去了安装的麻烦
2. 体积小，节省手机空间
3. 使得手机桌面更加简洁
4. 可以依靠微信平台传播、获取客户，节省了推广成本
5. 开发周期短，节省了开发成本
6. 开发门槛相对较低
7. 连接线上线下，给生活带来了便利…
缺点
1. 微信小程序整个体系依赖于微信
2. 推送消息有诸多限制
3. 小程序不能承载用户的所有需求

四、与其他相关概念的区别

与H5的区别

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

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

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

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

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

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

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

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

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

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

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

五、小程序的环境

在这里插入图片描述

六、初始化项目

新建项目
- 扫码登录
开发工具
- 切后台
- sensor 用来调试地理位置调式重力感应的api
目录结构
- app.json
  - 全局的公共配置:是当前小程序的全局配置，包括了小程序的所有页面路径、界面表现、网络超时时间、底部 tab 等
- app.wxss
  - 小程序公共样式表
- app.js
  - 小程序逻辑
- project.config.json
  - 记录开发者工具配置信息例如界面颜色、编译配置等等
- sitemap.json
  - 配置小程序页面是否被微信索引；
小程序页面
- js ：页面逻辑
- wxml：页面结构
- json：页面配置
- wxss：页面样式

七、小程序单位

相关单位
- pt逻辑分辨率（视觉单位，和屏幕尺寸有关系）；
- px物理分辨率（像素点）
- ppi：每英寸包含的像素点
小程序单位换算关系
- iphone6下1px=1rpx=0.5pt（rpx会在不同设备下转换、而px不会）；

八、导航栏配置

app.json
- pages：配置小程序页面路径
- window 配置顶部导航栏文档地址

{
  "window": {
    "navigationBarBackgroundColor": "#ffffff",
    "navigationBarTextStyle": "black",
    "navigationBarTitleText": "微信接口功能演示",
    "backgroundColor": "#eeeeee",
    "backgroundTextStyle": "light"
  }
}

tabbar配置底部导航栏

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

在这里插入图片描述

路由跳转
- wx.switchTap:跳转到 tabBar 页面，并关闭其他所有非 tabBar 页面
- wx.navigateTo:保留当前页面，跳转到应用内的某个页面。但是不能跳到 tabbar 页面。使用 wx.navigateBack 可以返回到原页面。小程序中页面栈最多十层。
- wx.redirectTo:关闭当前页面，跳转到应用内的某个页面。但是不允许跳转到 tabbar 页面。
- wx.reLaunch:关闭所有页面，打开到应用内的某个页面
事件绑定
- bindtap 和 catchtap:catch 会阻止冒泡
  - dataset 带参数
  - 事件中布尔值

九、模板引用

模板引用

提高模板复用性；

定义模板

<template name="A">
	<text> A template </text>
</template>

引入模板
- Import 可以在该文件中使用目标文件定义的template

<import src="/pages/templates/a.wxml" />
<template is="a"></template>

include 可以将目标文件除了 template 外的整个代码引入，相当于是拷贝到 include 位置

<include src="/pages/templates/b.wxml" />

十、网络请求

网络请求

wx.request({
  url: 'test.php', //仅为示例，并非真实的接口地址
  data: {
    x: '',
    y: ''
  },
  header: {
    'content-type': 'application/json' // 默认值
  },
  success (res) {
    console.log(res.data)
  }
})