微信小程序入门级别介绍(毫无保留式分享)值得收藏
小程序
介绍
微信小程序,简称小程序,英文名 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;
功能
和微信一致(右上角胶囊按钮,下拉刷新,也是小程序快的原因) - 特别注意
注册/登陆/下载
- 注册/登陆
官网注册:点击官网注册
注册成功后 获取开发 appid 并复制(创建项目时需要)
- 下载微信小程序开发工具
官网下载:点击官网下载
长这样
小程序功能介绍
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}}">
微信小程序入门级别介绍(毫无保留式分享)值得收藏相关推荐
- 微信小程序哪个能唱歌_可以听歌的微信小程序有哪些?推荐几个值得收藏的!...
不知道大家是否跟我一样都喜欢听音乐,比如心情不好,工作压力大,或者生活上的压迫,就会感觉整个人都挺丧.心事很少告诉别人,担心人家当笑话一样听.所以只有静下来听听歌,平复一下心情,今天全网小程序门户网站 ...
- 【零基础微信小程序入门开发一】小程序介绍及环境搭建
什么是小程序? 微信小程序,小程序的一种,英文名Wechat Mini Program,是一种不需要下载安装即可使用的应用,它实现了应用"触手可及"的梦想,用户扫一扫或搜一下即可打 ...
- 【微信小程序】微信小程序入门与实战-个人笔记
微信小程序入门与实战 文章目录 微信小程序入门与实战 1 初识微信小程序 1-1 2020版重录说明 1-2 下载小程序开发工具 1-3 新建小程序项目 1-4 小程序appid的注册 1-5 新版小 ...
- A095_day01_微信小程序入门与组件
目录 微信小程序入门与组件 - Day01 1.内容介绍 2.微信小程序简介(了解) 2.1.什么是小程序 2.2.微信小程序与app的区别 2.3.小程序在入口 2.4.微信小程序的工作原理 2.5 ...
- 微信小程序入门与实战(七月)
微信小程序入门与实战(七月) 第1章 初识微信小程序 第2章 小程序的基本目录结构与文件作用剖析 2-1 小程序页面的4种基本文件类型详解 第3章 rpx响应式单位与flex布局 3-3 新建页面的技 ...
- 微信小程序入门之常用组件(04)
常见组件 重点讲解微信小程序中常见的布局组件 view,text,rich-text,button,image,navigator,icon,swiper, radio,checkbox 等 一.vi ...
- 微信小程序入门笔记(一)
day 01 1.微信公众平台 https://mp.weixin.qq.com/ 品牌,营销 1.1微信公众平台概念 微信公众平台,简称公众号.曾命名为"官号平台"." ...
- 微信小程序入门七登录注册
上一章介绍了 微信小程序入门六本地缓存和搜索 ,这章介绍小程序的登录注册页面.主要有表单的验证,错误信息的提示,form表单的取值,get / post 请求 ,反馈交互提示框,页面跳转 以及 页面U ...
- 从零开始的微信小程序入门教程(一)
从零开始的微信小程序入门教程(一) 之前说要和同事一起开发个微信小程序项目,现在也在界面设计,功能定位等需求上开始实施了.所以在还未正式写项目前,打算在空闲时间学习下小程序.本意是在学习过程中结合实践 ...
最新文章
- mysql select语法_MySQL SELECT语法(一)SELECT语法详解
- ddr4 lpddr4区别_iFixit 拆解 iPhone 12 系列:仍使用 LPDDR4 内存 | 爱搞机
- 简述python的特性_python的一些语言特性(一)
- mysql缺少函数_Sqlserver的窗口函数的精彩应用之数据差距与数据岛-答案篇
- springboot 拦截器的坑 WebMvcConfigurationSupport 失效
- GPCC安装以及踩坑经历
- java8之list集合中取出某一属性的方法
- string字符串的查找替换、模式匹配
- shell函数显式的返回值
- java8新特性和汪文君Google Guava项目实战视频
- 【各学校通用】5分钟刷完天津科技大学雨课堂视频
- 人脸识别最全知识图谱
- 易语言单窗口单ip软件源码_易语言助手下载-易语言助手 v3.2.0701 官方版
- python dataset_数据管道Dataset
- android vold磁盘管理
- mac os x使用Git简易入门教程
- 收集一些网页模板/素材的网站
- ipad如何改造成linux终端,如何实现让ipad上使用终端terminal
- UGA内存泄露问题 ORA-600 [729] Space Leak Errors [ID 403584.1]
- 坚果pro2MIUI10修改按键功能
热门文章