小程序

介绍

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

背景

16年推出
竞品：支付宝小程序、钉钉、美团、头条、抖音、qq小程序

优点

  • 在微信自由分享
  • 不用下载app
  • 能快速开发，使用微信的api接口

注意事项

  • a.开发者来说：内存、源码、图片、存储、接口与数据都是有限制的
  • b.语法：json要求严格语法，不能有多余的注释号和逗号，key 和 value 字符串必须用 双引号 引起来，数组 或 对象最后一位不能有 逗号 。
  • wxss：
    小程序默认单位 rpx；
    50rpx 等于一个屏的宽；
    375就是50%的宽
  • c.小程序的限制：
    原文件大小，每个包不能超过2m；
    页面缓存堆栈5层；
    底部栏/最少2个，最多5个；
    本地存储/一次1M 最多100M；
    setData不能超过1M；
    功能和微信一致（右上角胶囊按钮，下拉刷新，也是小程序快的原因）
  • 特别注意

注册/登陆/下载

  1. 注册/登陆
    官网注册：点击官网注册

    注册成功后 获取开发 appid 并复制（创建项目时需要）
  2. 下载微信小程序开发工具
    官网下载：点击官网下载


    长这样

小程序功能介绍

1. 小程序开发工具首页

2.界面介绍

3.文件结构


4.小程序生命周期（在每个页面的js里面）

5.小程序配置
参考网址：全局配置 | 微信开放文档
app.json 文件用来对微信小程序进行 全局配置 ，设置小程序页面数量（路由）、窗口表现、设置底部 或 顶部菜单、网络请求超时时间 等。

使用

1. 在pages创建页面

  • 在pages文件夹右键新建的文件夹
  • 在新建的文件夹中右键新建page页面
  • 在app.json中那个page在最上面默认显示那张页面

2.页面组件介绍 pages/home

  • home.js业务逻辑
  • home.json 页面配置
  • home.wxml 模板文件
  • home.wxss 样式

接下来我会介绍小程序中的
内置组件、模板语法、事件、表单、页面切换、页面传参、tabar、封装request、npm安装包

内置组件

  • view组件 块组件（类似div）
  • text 组件 行内组建 （类似span）
  • button 组件 按钮
  • input 组件 表单
  • 更多请参考官方文档：官方文档
<view class="title">view组件
</view>
<view>view组件2
</view>
<text>text文本组件</text>
<text>text文本组件2</text>

模板语法 （小程序的模板语法 约等于vue的模板语法）

  • import / include导入 模块

import:只能导入template内容
操作：
1.pages并排 新建template/utils.wxml
2.在pages/home.wxml 书写：

<import src="/template/utils.wxml">
<tempate is="userCart" data="{{...u1}}">

3.通过home.js/data进行模板传参

//01 在home.js 定义数据
//02 在template/utils.js  引用数据  例如：<view>年龄：{{age}}</view>
data: {u1:{name:"敏敏",age:18},u2:{name:"zwm",age:24},list:["vue",'react','小程序'],isLog:false,"score":80,"msg":"你好腾讯，你好小程序！"},


include只能导入非template内容（例：include）
操作：
1.在 template里新建foot.wxml

书写：<view>{{内容}}</view>

2.在pages/home.wxml

书写：<include src="/template/foot.wxml">
  • 文本渲染
  //{{ 文本 }}//可以执行简单的js表达式
<view>{{msg.length}}</view>
<view>{{5+3}}</view>
<view>{{msg.length>8?'大于':'小于'}}</view>
  • 条件渲染
    wx:if=""
    wx:elif=""
    wx:else
//wxml文件
<view class="title"> 多重条件渲染</view>
<view wx:if="{{score>=90}}">												


											

微信小程序入门级别介绍（毫无保留式分享）值得收藏相关推荐
	

    
								
  1. 微信小程序哪个能唱歌_可以听歌的微信小程序有哪些？推荐几个值得收藏的！...
		
    不知道大家是否跟我一样都喜欢听音乐,比如心情不好,工作压力大,或者生活上的压迫,就会感觉整个人都挺丧.心事很少告诉别人,担心人家当笑话一样听.所以只有静下来听听歌,平复一下心情,今天全网小程序门户网站 ...
    
		
    2. 
						
  2. 【零基础微信小程序入门开发一】小程序介绍及环境搭建
		
    什么是小程序? 微信小程序,小程序的一种,英文名Wechat Mini Program,是一种不需要下载安装即可使用的应用,它实现了应用"触手可及"的梦想,用户扫一扫或搜一下即可打 ...
    
		
    3. 
						
  3. 【微信小程序】微信小程序入门与实战-个人笔记
		
    微信小程序入门与实战 文章目录 微信小程序入门与实战 1 初识微信小程序 1-1 2020版重录说明 1-2 下载小程序开发工具 1-3 新建小程序项目 1-4 小程序appid的注册 1-5 新版小 ...
    
		
    4. 
						
  4. A095_day01_微信小程序入门与组件
		
    目录 微信小程序入门与组件 - Day01 1.内容介绍 2.微信小程序简介(了解) 2.1.什么是小程序 2.2.微信小程序与app的区别 2.3.小程序在入口 2.4.微信小程序的工作原理 2.5 ...
    
		
    5. 
						
  5. 微信小程序入门与实战（七月）
		
    微信小程序入门与实战(七月) 第1章 初识微信小程序 第2章 小程序的基本目录结构与文件作用剖析 2-1 小程序页面的4种基本文件类型详解 第3章 rpx响应式单位与flex布局 3-3 新建页面的技 ...
    
		
    6. 
						
  6. 微信小程序入门之常用组件(04)
		
    常见组件 重点讲解微信小程序中常见的布局组件 view,text,rich-text,button,image,navigator,icon,swiper, radio,checkbox 等 一.vi ...
    
		
    7. 
						
  7. 微信小程序入门笔记（一）
		
    day 01 1.微信公众平台 https://mp.weixin.qq.com/ 品牌,营销 1.1微信公众平台概念 微信公众平台,简称公众号.曾命名为"官号平台"." ...
    
		
    8. 
						
  8. 微信小程序入门七登录注册
		
    上一章介绍了 微信小程序入门六本地缓存和搜索 ,这章介绍小程序的登录注册页面.主要有表单的验证,错误信息的提示,form表单的取值,get / post 请求 ,反馈交互提示框,页面跳转 以及 页面U ...
    
		
    9. 
						
  9. 从零开始的微信小程序入门教程(一)
		
    从零开始的微信小程序入门教程(一) 之前说要和同事一起开发个微信小程序项目,现在也在界面设计,功能定位等需求上开始实施了.所以在还未正式写项目前,打算在空闲时间学习下小程序.本意是在学习过程中结合实践 ...
    
		
    10. 
		


					

最新文章
	

    
						
  1. “黑客”一年能赚多少钱？
		
    2. 
						
  2. 重返学术界！​微软全球执行副总载沈向洋加盟清华大学！招收计算机视觉图形学博士生...
		
    3. 
						
  3. 51nod 算法马拉松18 B 非010串 矩阵快速幂
		
    4. 
						
  4. 又一个高等级数据中心着火了！
		
    5. 
						
  5. 前端学习（2835）：小程序中使用less
		
    6. 
						
  6. antd 能自适应吗_react 基于antd表格自适应宽度显示。。。鼠标滑动显示详细内容解决办法...
		
    7. 
						
  7. Gartner 2021年IaaS+PaaS能力评估：亚马逊云科技排名第一
		
    8. 
						
  8. 路由器IP-4-DUPADDR: Duplicate address和CDP-4-DUPLEX_MISMATCH错误的解决方案
		
    9. 
						
  9. Proxy动态代理代码示例
		
    10. 
						
  10. 在ubuntu 20.04 上 安装 onnxruntime CUDA
		
    11. 
						
  11. 嵌入式Linux开发板移植SSH
		
    12. 
						
  12. 人工智能革命（上）：通往超级智能之路
		
    13. 
						
  13. 快速入门学习数字图像处理（冈萨雷斯第三版）
		
    14. 
						
  14. Bus Hound总线分析工具的使用
		
    15. 
						
  15. [转]KSN报告：2014 - 2016年的PC勒索软件
		
    16. 
						
  16. 基于深度学习的图像修复—心中无码
		
    17. 
						
  17. 华为USG防火墙及NGFW高可用性的规划与实施详解
		
    18. 
						
  18. C语言32位正整数作为id进程,SOJ4453 Excel列数 进制转换
		
    19. 
						
  19. 基于Python的卷积神经网络的猫狗图像识别系统
		
    20. 
						
  20. DNS系统概述及重要性
		
    21. 
		

	


热门文章
	

    
									
  1. 设计模式学习Day1（来自于知乎力扣官方）
			
    2. 
						
  2. 郴州市三中2021高考成绩查询,2021郴州高中排名前十最新名单
			
    3. 
						
  3. MySQL的CASE和CONCAT的用法
			
    4. 
						
  4. java ssh三层架构_SSH和三层架构的MVC模式的对应关系
			
    5. 
						
  5. MapReduce关系代数运算——自然连接
			
    6. 
						
  6. 模块“XXX.ocx”已加载，但对 DllUnregisterServer 的调用失败，错误代码为 0x8002801c
			
    7. 
						
  7. 设计分享|基于单片机LCD数字测速仪的设计
			
    8. 
						
  8. String转Date格式显示年月日或其他自定义格式
			
    9. 
						
  9. 微信小程序事件传参以及循环
			
    10. 
						
  10. 【交通标志识别】基于matlab GUI BP神经网络交通标志识别系统（含语音报警）【含Matlab源码 2240期】
			
    11.