小程序

介绍

微信小程序,简称小程序,英文名 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封装requestnpm安装包

内置组件

  • 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. 【零基础微信小程序入门开发一】小程序介绍及环境搭建

    什么是小程序? 微信小程序,小程序的一种,英文名Wechat Mini Program,是一种不需要下载安装即可使用的应用,它实现了应用"触手可及"的梦想,用户扫一扫或搜一下即可打 ...

  3. 【微信小程序】微信小程序入门与实战-个人笔记

    微信小程序入门与实战 文章目录 微信小程序入门与实战 1 初识微信小程序 1-1 2020版重录说明 1-2 下载小程序开发工具 1-3 新建小程序项目 1-4 小程序appid的注册 1-5 新版小 ...

  4. A095_day01_微信小程序入门与组件

    目录 微信小程序入门与组件 - Day01 1.内容介绍 2.微信小程序简介(了解) 2.1.什么是小程序 2.2.微信小程序与app的区别 2.3.小程序在入口 2.4.微信小程序的工作原理 2.5 ...

  5. 微信小程序入门与实战(七月)

    微信小程序入门与实战(七月) 第1章 初识微信小程序 第2章 小程序的基本目录结构与文件作用剖析 2-1 小程序页面的4种基本文件类型详解 第3章 rpx响应式单位与flex布局 3-3 新建页面的技 ...

  6. 微信小程序入门之常用组件(04)

    常见组件 重点讲解微信小程序中常见的布局组件 view,text,rich-text,button,image,navigator,icon,swiper, radio,checkbox 等 一.vi ...

  7. 微信小程序入门笔记(一)

    day 01 1.微信公众平台 https://mp.weixin.qq.com/ 品牌,营销 1.1微信公众平台概念 微信公众平台,简称公众号.曾命名为"官号平台"." ...

  8. 微信小程序入门七登录注册

    上一章介绍了 微信小程序入门六本地缓存和搜索 ,这章介绍小程序的登录注册页面.主要有表单的验证,错误信息的提示,form表单的取值,get / post 请求 ,反馈交互提示框,页面跳转 以及 页面U ...

  9. 从零开始的微信小程序入门教程(一)

    从零开始的微信小程序入门教程(一) 之前说要和同事一起开发个微信小程序项目,现在也在界面设计,功能定位等需求上开始实施了.所以在还未正式写项目前,打算在空闲时间学习下小程序.本意是在学习过程中结合实践 ...

最新文章

  1. mysql select语法_MySQL SELECT语法(一)SELECT语法详解
  2. ddr4 lpddr4区别_iFixit 拆解 iPhone 12 系列:仍使用 LPDDR4 内存 | 爱搞机
  3. 简述python的特性_python的一些语言特性(一)
  4. mysql缺少函数_Sqlserver的窗口函数的精彩应用之数据差距与数据岛-答案篇
  5. springboot 拦截器的坑 WebMvcConfigurationSupport 失效
  6. GPCC安装以及踩坑经历
  7. java8之list集合中取出某一属性的方法
  8. string字符串的查找替换、模式匹配
  9. shell函数显式的返回值
  10. java8新特性和汪文君Google Guava项目实战视频
  11. 【各学校通用】5分钟刷完天津科技大学雨课堂视频
  12. 人脸识别最全知识图谱
  13. 易语言单窗口单ip软件源码_易语言助手下载-易语言助手 v3.2.0701 官方版
  14. python dataset_数据管道Dataset
  15. android vold磁盘管理
  16. mac os x使用Git简易入门教程
  17. 收集一些网页模板/素材的网站
  18. ipad如何改造成linux终端,如何实现让ipad上使用终端terminal
  19. UGA内存泄露问题 ORA-600 [729] Space Leak Errors [ID 403584.1]
  20. 坚果pro2MIUI10修改按键功能

热门文章

  1. 一个F范数对矩阵求导例子
  2. 企业信用调查报告和企业信用评级报告
  3. 绝地求生服务器维护4月9日,绝地求生4月9日停机维护到什么时候 4.9吃鸡更新维护公告...
  4. 三步完成吉布斯采样Gibbs sampling
  5. 一部手机做好屏幕适配
  6. Oculus VR设备账号登陆
  7. ImmunoChemistry艾美捷星孢菌素说明书
  8. 3518. 进化序列(evolve)
  9. 团体程序设计天梯赛 L1-014 简单题
  10. 通过身份证号获取用户生日