微信小程序学习(跟着b站的黑马程序员视频所学)
************本文笔记是跟着b站黑马程序员视频所记
图片有些是学时自截图,有些是视频的图片
(不妥删除!!)
创建小程序项目
1、目录(为空白文件夹)
2、AppID(在小程序网页中)
3、后端服务(不使用云服务)
4、语言(JavaScript)
查看项目效果
编译、预览(在真机上查看)
项目结构
1、项目组成部分
① pages 用来存放所有小程序的页面
② utils 用来存放工具性质的模块(例如:格式化时间的自定义模块)
③ app.js 小程序项目的入口文件
④ app.json 小程序项目的全局配置文件
⑤ app.wxss 小程序项目的全局样式文件
⑥ project.config.json 项目的配置文件
⑦ sitemap.json 用来配置小程序及其页面是否允许被微信索引
2、小程序页面组成部分
小程序官方建议把所有小程序的页面,都存放在pages目录中,以单独的文件夹存放
其中,每个页面由4个基本文件组成,分别是:
① .js 文件(页面的脚本文件,存放页面的数据、事件处理函数等)
② .json 文件(当前页面的配置文件,配置窗口的外观、表现等)
③ .wxml 文件(页面的模板结构文件)
④ .wxss 文件(当前页面的样式表文件)
3、JSON配置文件
JSON是一种数据格式,在实际开发中,JSON 总是以配置文件的形式出现。
①作用:可以对小程序项目进行不同级别的配置
②种类:
(1)项目根目录中的app.json配置文件
(2)项目根目录中的project.config.json配置文件
(3)项目根目录中的sitemap.json配置文件
(4)每个页面文件夹中的.json配置文件
③app.json(当前小程序的全局配置,包括小程序所有页面路径、窗口外观、界面表现、底部tab等)
(1)pages:用来记录当前小程序所有页面的路径
(2)window:全局定义小程序所有页面的背景色、文字颜色等
(3)style:全局定义小程序组件所使用的样式版本
(4)sitemaplocation:用来指明sitemap.json的位置
④project.config.json文件(用来记录我们对小程序开发工具所做的个性化配置)
(1)setting中保存了编译相关的配置
(2)projectname中保存的是项目名称
(3)appid中保存的是小程序的账号ID
* projectmane不是小程序名称(在管理后台修改)
⑤sitemap.json(配置小程序页面是否允许微信索引)
⑥页面的.json配置文件(可以使用.json文件对本页面的窗口外观进行配置,页面中的配置项会覆盖app.json的window中相同的配置项)以页面配置为准
⑦新建小程序页面
在app.json->pages中新增页面的存放路径
4、JS逻辑交互
小程序中.js 文件的分类
小程序中的JS文件分为三大类,分别是:
(1)app.js
是整个小程序项目的入口文件,通过调用App()函数来启动整个小程序
(2)页面的.js 文件
是页面的入口文件,通过调用Page()函数来创建并运行页面
(3)普通的.js 文件
是普通的功能模块文件,用来封装公共的函数或属性供页面使用
5、宿主环境(是程序运行所必须的依赖环境)
①小程序宿主环境包含的内容(1、通信模型 2、运行机制 3、组件 4、API)
②通信的主体
小程序中通信的主体是渲染层和逻辑层,其中:
(1)WXML模板和wXSS样式工作在渲染层
(2)JS脚本工作在逻辑层
③小程序启动的过程
(1)把小程序的代码包下载到本地
(2)解析app.json全局配置文件
(3) 执行app.js 小程序入口文件,调用App()创建小程序实例
(4)渲染小程序首页
1、加载解析页面的.json配置文件
2、加载页面的.wxml模板和.wxSs样式
3、执行页面的.js 文件,调用Page()创建页面实例
4、页面渲染完成
(5)小程序启动完成
④组件
WXML模板语言(数据绑定)
(1)数据绑定的基本原则
①在data中定义数据
1、在页面对应的.js 文件中,把数据定义到data对象中即可:
info(指向字符串类型)msgList(指向数组类型)
2、Mustache语法的格式
把data中的数据绑定到页面中渲染,使用Mustache语法(双大括号)将变量包起来即可。语法格式为;
②在WXML中使用数据
事件绑定
在事件处理函数中为data中的数据赋值
事件传参
不能又传参又赋值
可以为组件提供data-*自定义属性传参,其中*代表的是参数的名字
e.g.
{{734}} 传的是数字
“734” 传的是字符串
条件渲染
微信小程序学习(跟着b站的黑马程序员视频所学)相关推荐
- 微信小程序富文本rich-text使用详解-微信小程序系统学习攻略
也许你迷茫,但是我想说,在你迷茫的同时,保持本心,过好今天就好. 在微信小程序开发中,rich-text 标签可以用来显示富文本 html内容,可以渲染部分html标签,全局支持class和style ...
- 微信小程序文本组件text使用详解-微信小程序系统学习攻略
也许你迷茫,但是我想说,在你迷茫的同时,保持本心,过好今天就好. 在微信小程序中,组件 text 用来显示文本,基本使用代码如下: <text >测试使用</text> 1 基 ...
- 微信小程序学习笔记--商城案例(黑马教程)
目录 起步 运行于小程序 Git 托管到码云 tabbar 创建tabBar 配置tabbar 导航条颜色 首页 网络配置 请求轮播图数据 渲染轮播图 配置小程序分包 点击轮播图,跳转详情页 全局添加 ...
- 微信小游戏 - 学习/实践
1.应用场景 主要用于快速开发微信小游戏. 2.学习/操作 1.介绍 小游戏是一种基于微信平台开发,不需要下载安装即可使用的全新游戏应用,体现了"用完即走"的理念,充分节省用户的手 ...
- 微信小程序教学第三章第四节(含视频):小程序中级实战教程:下拉更新、分享、阅读标识...
为什么80%的码农都做不了架构师?>>> 下拉更新.分享.阅读标识 本文配套视频地址: https://v.qq.com/x/page/h0554i4u5ob.html 开始前 ...
- 微信小游戏学习日记1
1.App手游和微信小游戏 2.微信小游戏Unity WebGL转换方案 解析: 3.提升Unity WebGLue游戏启动速度 4.瘦身游戏代码包体 解析: 5.资源优化与按需加载 解析: 6.游戏 ...
- SpringCloud学习笔记,课程源自黑马程序员,笔记持续更新中...
@SpringCloud+RabbitMQ+Docker+Redis+搜索+分布式: 学习内容 1.服务拆分-服务远程调用: 2.搭建eureka服务: 2.1.eureka服务注册-client 2 ...
- SEO权重MIP泛站群程序_MIP泛目录站群php程序 快速收录排名
SEO权重MIP泛站群程序 演示搭建程序教程 http://player.youku.com/embed/XNDQyMTg5NzE2OA== 千梦正版500一套 Q 371615156 本程序:仅供 ...
- 微信小游戏学习日记2
1.MeshRenderer组件 解析: [1]mesh:会用到的Mesh资源,可以来自于FBX. [2]castShadow:是否投射阴影 [3]receiveShadow:是否接收阴影 [4]li ...
- CSS 学习笔记总结(借鉴黑马程序员pink老师前端入门)
1. CSS 简介 CSS 的主要使用场景就是美化网页,布局页面的 1.1 HTML 的局限性 说起 HTML ,他只关注内容的语义.比如 <h1> 表明这是一个大标题,<p> ...
最新文章
- 2018年最新整理ios APP审核被拒的常见原因
- web之JavaScript
- js结束当前循环关键词_干货||什么是事件循环机制
- 求 逆矩阵 公式推导
- 多导睡眠图(PSG)数据的睡眠阶段分类
- Simscape Multibody --- 齿轮齿条约束
- UART串口协议时序图
- 学计算机应用的必懂知识,学习计算机应用基础心得体会
- 【Python数据分析学习实例】计算某个函数的一阶导数、二阶导数,并绘出图像
- 迅雷 android下载地址 http,Android HTTP边下边播
- linux 内功修炼之一 cpu
- 联想ThinkBook 14+和 2022宏碁非凡S3 哪个好
- Table sink ‘default_catalog.default_database.t3‘ doesn‘t support consuming update and delete changes
- CMNET和CMWAP简单区别
- 报错:找不到模块“antd-mobile (也可以是其他的模块)”或其相应的类型声明。
- sparknbsp;项目启动的时候报出如下错误
- 黑马手机卫士黑名单电话拦截 使用ITelephony.aidl和NeighboringCellInfo.aidl 自动拦截黑名单电话 附文件
- Python采集CSDN博客排行榜数据
- aba会导致问题_CAS导致的ABA问题及解决
- c语言typedef结构体_typedef在C中具有结构的示例
热门文章
- Fortran 95简单教程(
- GetTickCount
- Vbs调用MsAgent组件,很有趣
- [GitHub][2014-05-13 06:00:39]JavaDsp
- 编程之美1.7 光影切割问题
- java万年历算法_寿星万年历---java算法实现
- 【HTML】【简易电子相册】超链接
- 网站时间日期代码html,显示网站运行时间及当前时间的代码
- php1008打印机驱动器,hp laserjet p1008打印机驱动
- 绝地求生要java吗_绝地求生卡盟_【Java】几种典型的内存溢出案例,都在这儿了!...