微信小程序|小程序的构成(初识小程序详细简介)
小程序的构成
目录
- 小程序的构成
- 1.项目结构
- 1.1 项目的基本组成结构
- 1.1.1 pages(目录)\textcolor{MediumBlue}{pages(目录)}pages(目录)
- 1.1.2 utils(目录)
- 1.1.3 app.js\textcolor{MediumBlue}{app.js}app.js
- 1.1.4 app.json\textcolor{MediumBlue}{app.json}app.json
- 1.1.5 app.wxss
- 1.1.6 project.config.json
- 1.2 页面的基本文件(组成部分)
- 2.JSON-配置文件(配置文件)
- 2.1 pages\textcolor{MediumBlue}{pages}pages
- 2.2 window\textcolor{MediumBlue}{window}window
- 2.3 style\textcolor{MediumBlue}{style}style
- 2.4 sitemapLocation
- 3.WXSS-美化页面(样式文件)
- 3.1 新增了 rpx 尺寸单位
- 3.2 提供全局样式和局部样式
- 3.3 仅支持部分CSS选择器
- 4.WXML-渲染页面(结构文件)
- 4.1 WXML标签名称
- 4.2 属性节点
- 4.3 类似于Vue中的模板语法
- 5.JS-逻辑交互(脚本文件)
- 5.1 app.js
- 5.2 页面的 .js 文件
- 5.3 普通的.js文件
- 6.小程序的宿主环境
- 6.1 小程序宿主环境的内容
- 6.1.1 通信模型
- 6.1.2 运行机制
- 小程序的启动过程
- 6.1.3 组件
- 6.1.3.1 常用的视图容器类组件
- 6.1.3.2 常用的基础内容组件
- 6.1.4 API
- 7.小程序协同分工与分布
- 7.1 协同分工
- 7.1.1 项目成员的组织结构
- 7.1.2 开发者权限说明
- 7.1.3 小程序成员管理
- 7.1.4 小程序的开发流程
- 7.2 小程序的发布
- 7.2.1 小程序的版本
- 7.2.2 发布上线
- 1.上传代码
- 2.后台查看上传的版本
- 3.发布
1.项目结构
1.1 项目的基本组成结构
1.1.1 pages(目录)\textcolor{MediumBlue}{pages(目录)}pages(目录)
用来存放所有小程序页面
所有的页面都以单独的文件夹放在pages目录中
1.1.2 utils(目录)
- 用来存放工具性质的模块(例如:格式化事件的自定义模块)
1.1.3 app.js\textcolor{MediumBlue}{app.js}app.js
- 小程序项目的入口文件
1.1.4 app.json\textcolor{MediumBlue}{app.json}app.json
- 小程序项目的全局配置文件
1.1.5 app.wxss
- 小程序项目的全局样式文件
1.1.6 project.config.json
- 项目的配置文件
小程序开发者工具在每个项目的根目录只要载入同一个项目的代码包,开发者工具就自动会帮你恢复到当时你开发项目时的个性化配置,其中会包括编辑器的颜色、代码上传时自动压缩等等一系列选项。
项目配置文件
可以在项目根目录使用 project.config.json
文件对项目进行配置。
字段名 | 类型 | 说明 |
---|---|---|
miniprogramRoot | Path String | 指定小程序源码的目录(需为相对路径) |
qcloudRoot | Path String | 指定腾讯云项目的目录(需为相对路径) |
pluginRoot | Path String | 指定插件项目的目录(需为相对路径) |
compileType | String | 编译类型 |
setting | Object | 项目设置 |
libVersion | String | 基础库版本 |
appid | String | 项目的 appid,只在新建项目时读取 |
projectname | String | 项目名字,只在新建项目时读取 |
packOptions | Object | 打包配置选项 |
debugOptions | Object | 调试配置选项 |
scripts | Object | 自定义预处理 |
compileType 有效值
名字 | 说明 |
---|---|
miniprogram | 当前为普通小程序项目 |
plugin | 当前为小程序插件项目 |
setting 中可以指定以下设置
字段名 | 类型 | 说明 |
---|---|---|
es6 | Boolean | 是否启用 es6 转 es5 |
postcss | Boolean | 上传代码时样式是否自动补全 |
minified | Boolean | 上传代码时是否自动压缩 |
urlCheck | Boolean | 是否检查安全域名和 TLS 版本 |
setting示例配置:
"setting": {"urlCheck": true,"es6": true,"enhance": true,"postcss": true,"preloadBackgroundData": false,"minified": true,"newFeature": false,"coverView": true,"nodeModules": false,"autoAudits": false,"showShadowRootInWxmlPanel": true,"scopeDataCheck": false,"uglifyFileName": false,"checkInvalidKey": true,"checkSiteMap": false,"uploadWithSourceMap": true,"compileHotReLoad": false,"lazyloadPlaceholderEnable": false,"useMultiFrameRuntime": true,"useApiHook": true,"useApiHostProcess": true,"babelSetting": {"ignore": [],"disablePlugins": [],"outputPath": ""},"enableEngineNative": false,"useIsolateContext": true,"userConfirmedBundleSwitch": false,"packNpmManually": false,"packNpmRelationList": [],"minifyWXSS": true,"disableUseStrict": false,"minifyWXML": true,"showES6CompileOption": false,"useCompilerPlugins": false},
scripts 中指定自定义预处理的命令
名字 | 说明 |
---|---|
beforeCompile | 编译前预处理命令 |
beforePreview | 预览前预处理命令 |
beforeUpload | 上传前预处理命令 |
packOptions
packOptions
用以配置项目在打包过程中的选项。打包是预览、上传时对项目进行的必须步骤。
目前可以指定 packOptions.ignore
字段,用以配置打包时对符合指定规则的文件或文件夹进行忽略,以跳过打包的过程,这些文件或文件夹将不会出现在预览或上传的结果内。
packOptions.ignore
为一对象数组,对象元素类型如下:
字段名 | 类型 | 说明 |
---|---|---|
value | string | 路径或取值 |
type | string | 类型 |
其中,type
可以取的值为 folder
、file
、suffix
、prefix
,分别对应文件夹、文件、后缀、前缀。
示例配置如下:
{"packOptions": {"ignore": [{"type": "file","value": "test/test.js"}, {"type": "folder","value": "test"}, {"type": "suffix","value": ".webp"}, {"type": "prefix","value": "test-"}]}
}
注: value
字段的值不支持通配符、正则表达式。若表示文件或文件夹路径,以小程序目录 (miniprogramRoot
) 为根目录。
debugOptions
debugOptions
用以配置在对项目代码进行调试时的选项。
目前可以指定 debugOptions.hidedInDevtools
字段,用以配置调试时于调试器 Sources 面板隐藏源代码的文件。
hidedInDevtools
的配置规则和 packOptions.ignore
是一致的。
当某个 js 文件符合此规则时,调试器 Sources 面板中此文件源代码正文内容将被隐藏,显示为:
// xxx.js has been hided by project.config.json
注:配置此规则后,可能需要关闭并重新打开项目才能看到效果。
项目配置示例:
{"miniprogramRoot": "./src","qcloudRoot": "./svr","setting": {"postcss": true,"es6": true,"minified": true,"urlCheck": false},"packOptions": {},"debugOptions": {}
}
⚠**“checkSiteMap”: false, 可以取消黄色警告(取消sitemap的索引提示)**
- sitemap.json-用来配置小程序及其页面是否允许被微信索引
1.2 页面的基本文件(组成部分)
.js-逻辑交互(脚本文件)
- 存放页面的数据、事件处理函数等
.json-配置(配置文件)
- 配置当前页面窗口的外观、表现等
.wxss-美化页面结构(样式文件)
- 当前页面的样式表页面
.wxml-渲染页面结构(结构文件)
- 页面的模板结构文件
2.JSON-配置文件(配置文件)
app.json是当前小程序的全局配置\textcolor{red}{全局配置}全局配置,包括了小程序的所有页面路径、窗口外观、界面表现、底部tab\textcolor{red}{所有页面路径、窗口外观、界面表现、底部tab}所有页面路径、窗口外观、界面表现、底部tab等
每个页面自己的json内容与app.json冲突时会优先使用自身的json内容
2.1 pages\textcolor{MediumBlue}{pages}pages
用来记录当前小程序所有的页面路径
新建页面只需要在app.js文件的"pages":[]列表中加入"pages/页面名/页面名"
即可
"pages":["pages/home/home", //放在第一个位置的页面会被当做首页显示"pages/user/user","pages/index/index","pages/logs/logs","pages/msg/msg"],
2.2 window\textcolor{MediumBlue}{window}window
全局定义小程序所有页面的背景色、文字颜色等
"window":{"backgroundTextStyle":"light", // 小圆点的主题颜色light/dark"navigationBarBackgroundColor": "#ffe23b", // 导航栏背景颜色"navigationBarTitleText": "Jc图片表情Hub", // 导航栏文字标题内容"navigationBarTextStyle":"black", // 导航栏文字颜色"enablePullDownRefresh": true, // 是否开启下拉刷新"backgroundColor": "#ffe29b" // 背景颜色(下拉刷新时才能看到)},
2.3 style\textcolor{MediumBlue}{style}style
全局定义小程序组件所使用的样式版本
"style": "v2",
2.4 sitemapLocation
用来指明sitemap,json的值
"sitemapLocation": "sitemap.json",
3.WXSS-美化页面(样式文件)
3.1 新增了 rpx 尺寸单位
WXSS支持新的尺寸单位 $\textcolor{red}{rpx} $ ,在不同大小屏幕上可以自动进行换算适配
3.2 提供全局样式和局部样式
项目根目录中的app.json会作用于所有小程序页面
局部页面的 .wxss 样式仅对当前页面生效
3.3 仅支持部分CSS选择器
- .class 和 #id
- element
- 并集选择器、后代选择器
- ::after 和 ::before 等伪类选择器
4.WXML-渲染页面(结构文件)
4.1 WXML标签名称
HTML标签名称(div,span,img,a)
WXML标签名称(view,text,image,navigator)
4.2 属性节点
HTML:超链接
WXML:
4.3 类似于Vue中的模板语法
- 数据绑定
- 列表渲染
- 条件渲染
5.JS-逻辑交互(脚本文件)
小程序中js文件分为三大类:
5.1 app.js
- 是**$\textcolor{red}{整个小程序的入口文件} ∗∗,通过调用∗∗**,通过调用**∗∗,通过调用∗∗\textcolor{red}{App()} $**函数来启动整个小程序
5.2 页面的 .js 文件
- 是**$\textcolor{red}{页面的入口文件} ∗∗,通过调用∗∗**,通过调用**∗∗,通过调用∗∗\textcolor{red}{Pages()} $**函数来创建并运行页面
5.3 普通的.js文件
- 是**$\textcolor{red}{普通的功能模块文件} ∗∗,用来封装∗∗**,用来封装**∗∗,用来封装∗∗\textcolor{red}{公共的函数或属性}$**供页面使用
6.小程序的宿主环境
宿主程序是程序运行所必须的依赖环境\textcolor{red}{宿主程序是程序运行所必须的依赖环境}宿主程序是程序运行所必须的依赖环境
6.1 小程序宿主环境的内容
6.1.1 通信模型
小程序中通信的主题是 渲染层\textcolor{red}{渲染层}渲染层 和 逻辑层\textcolor{red}{逻辑层}逻辑层,其中:
① WXML模板和WXSS样式工作在渲染层
② JS脚本工作在逻辑层
6.1.2 运行机制
小程序的启动过程
- 把小程序的代码包下载到本地
- 解析app.json 全局配置文件
- 执行app.js 小程序入口文件,调用APP()创建小程序实例
- 渲染小程序首页
- 加载解析页面的 .json配置文件
- 加载页面的 .wxml模板和 .wxss样式
- 执行页面的 .js文件,调用Page()创建页面实例
- 页面渲染完成
5.小程序启动完成
6.1.3 组件
6.1.3.1 常用的视图容器类组件
view
- 普通视图区域
- 类似于HTML中的 div,是一个块级元素
- 常用来实现页面的布局效果
<view class="container1"><view>A</view><view>B</view><view>C</view> </view>
scroll-view
- 可滚动的视图区域
- 常用来实现滚动列表效果
<view><text>纵向滚动</text></view> <scroll-view class="container2" scroll-y><view>A</view><view>B</view><view>C</view> </scroll-view>
swiper 和 swiper-item
- 轮播图容器组件 和 轮播图 item 组件
<view>轮播图</view> <!-- indicator-dots 小圆点 indicator-color="white" 默认颜色indicator-active-color="grey" 激活颜色autoplay 自动轮播interval="3000" 自动轮播时间间隔circular 循环轮播 --> <swiper class="swiper-container" indicator-dots indicator-color="white" indicator-active-color="grey" autoplay interval="3000" circular><!-- 第一个轮播图 --><swiper-item><view class="item">A</view></swiper-item><!-- 第二个轮播图 --><swiper-item class="item"><view class="item">B</view></swiper-item><!-- 第三个轮播图 --><swiper-item class="item"><view class="item">C</view></swiper-item> </swiper>
6.1.3.2 常用的基础内容组件
text
- 文本组件
- 类似于HTML中的span标签,是一个行内元素
text组件的user-select 或 selectable属性,实现长按选中文本内容效果
<!-- user-select用户长按可选中复制 --> <view>手机号码为:<text user-select="true">13088888888</text> </view>
rich-text
- 富文本组件
- 支持把HTML字符串渲染为WXML结构
rich-text组件的nodes属性节点,把HTML字符串渲染为对应的UI结构
<!-- rich-text可以通过nodes属性把html字符串渲染成对应的UI结构 --> <rich-text nodes="<h1 style='color:red'>标题<h1>"></rich-text>
button
- 按钮组件
- 主要属性:type(类型:默认、primary、warn)、size(尺寸)、bind(绑定事件函数)
<!--button组件--> <view>~~~~~~~~~~通过 type 指定按钮类型~~~~~~~~~~</view> <button>默认按钮</button> <button type="primary">主色调按钮</button> <button type="warn">警告按钮</button><view>~~~~~~~~~~size="mini" 小尺寸按钮~~~~~~~~~~</view> <button size="mini">默认按钮</button> <button type="primary" size="mini">主色调按钮</button> <button type="warn" size="mini">警告按钮</button><view>~~~~~~~~~~plain 镂空按钮~~~~~~~~~~</view> <button size="mini" plain>默认按钮</button> <button type="primary" size="mini" plain>主色调按钮</button> <button type="warn" size="mini" plain>警告按钮</button>
image
- 图片组件
- 主要属性:src(路径)、mode(裁剪和缩放模式)
<view>~~~~~~~~~~image组件~~~~~~~~~~</view> <!-- image 的 mode属性--> <image src="/images/mountain.jpg" mode="scaleToFill" ></image> <image src="/images/mountain.jpg" mode="widthFix" ></image> <image src="/images/mountain.jpg" mode="heightFix" ></image> <image src="/images/mountain.jpg" mode="aspectFit" ></image>
mode属性值如下:
6.1.4 API
小程序的API是由宿主环境提供的,通过这些小程序的API,开发者可以方便的调用微信提供的能力,例如:获取用户信息、本地储存、支付功能等。
7.小程序协同分工与分布
7.1 协同分工
7.1.1 项目成员的组织结构
7.1.2 开发者权限说明
- 开发者权限:可使用小程序开发工具及对小程序的功能进行代码开发
- 体验者权限:可使用体验版小程序
- 登录权限:可登录小程序管理后台,无需管理员确认
- 开发设置:设置小程序服务器域名、消息推送及扫描普通链接二维码打开下程序
- 腾讯云管理:云开发相关设置
7.1.3 小程序成员管理
7.1.4 小程序的开发流程
7.2 小程序的发布
7.2.1 小程序的版本
7.2.2 发布上线
1.上传代码
2.后台查看上传的版本
3.发布
微信小程序|小程序的构成(初识小程序详细简介)相关推荐
- 微信小程序开发【一】-- 初识小程序
小程序已经火了很久了,一直想学习小程序,苦于工作比较忙,加班比较多没时间,当然这其实都是理由,很多时候习惯了搬砖,习惯了固定的圈子,很难也不想涉足其他的领域,但是也不能老错过一波又一波新鲜的东西吧. ...
- 微信小程序入门与实战之初识小程序的自定义组件
文章列表顶部轮播图跳转 为每个轮播图设置点击响应函数,为其设置参数为文章的id 小程序tabBar选项卡配置基础 我们在app.json配置tabBar选项卡: "tabBar": ...
- 微信小程序(2)入门初识小程序
目录 小程序的优点 创建项目 创建页面与APP.json 各文件用处 第一个 ****.js 第二个 ***.json文件 第三个 ****.wxml文 ...
- 微信小程序把view居中_初识微信小程序
"晓程序" 小程序连载笔记,通俗易懂,欢迎各位转发关注学习.未经作者授权,禁止转载 初识小程序 什么是微信小程序 微信小程序,小程序的一种,英文名Wechat Mini Progr ...
- 【微信小程序】初识小程序
什么是微信小程序 按照微信之父张小龙的定义,小程序是一种不需要下载安装即可使用的应用.小程序实现了应用"触手可及"的梦想,用户扫一扫或搜一下即可打开应用.同时,体现了"用 ...
- 初识小程序 ——微信小程序的入门和使用
一.小程序的介绍 在小程序特别火爆的今天,我们一起来了解了解小程序吧.小程序总类一般分为微信小程序.支付宝小程序.头条小程序.百度小程序.QQ小程序,小程序无需下载安装,能达到"触手可及&q ...
- 黯然微信小程序杂记(二):小程序最新版登录并进行缓存模块的实现 附源码
黯然微信小程序杂记(二):小程序最新版登录进行缓存模块的实现 附源码 一.功能描述 二.mine.wxml界面图片 三.mine.wxml代码 四.mine.wxss代码 五.mine.js代码 六. ...
- 微信小程序搜索功能!附:小程序前端+PHP后端
开发需求 微信小程序已经是非常火了,而且学习也比较容易,但是对于初学者来说还是一件比较伤脑筋的事,接下来给大家分享一下小程序搜索的思路. 流程 1.表单(输入框.提交按钮.提交的name值) 2.接收 ...
- 小程序input获得焦点触发_小程序如何获得种子用户,微信9亿月活用户来教你!...
小程序虽已上线2年了,但在微信生态中还非常年轻,正处于学习奔跑的阶段.而且,许多商家对于如何正确获得第一批种子用户,并不十分清楚. 今天,企乐网就以如何定位种子用户?种子用户在哪里获得?用什么方法沉淀 ...
最新文章
- 日期处理工具类 -【二】
- 生活大爆炸第6季第12集
- android 除了webview 浏览器控件,AgentWeb是基于Android WebView一个功能完善小型浏览器库...
- OpenCV提取图像颜色直方图
- extjs中Store和grid的刷新问题
- maven 关于使用 snapshot 的坑
- 软件测试的定义与分类
- C++的三种封装层级
- 华为交换机STP的配置实例
- 【物理/数学】概念的理解 —— pivot、position
- python结束多线程_如何中断/停止/结束挂起的多线程python程序
- C++ STL front_inserter back_inserter inserter 插入型迭代器的正确打开方式
- 2021-09-02Hive 未被external修饰的是内部表,被external修饰的是外部表
- mxh缩写英语_mxh的含义,mxh是什么的缩写,mxh的词语,mxh代表的意思
- 山东大学计算机考研909真题,2012年山东大学909数据结构考研试题(回忆版)
- python对网站DDos攻击
- 曹操为何杀死神医华佗?
- Amazon ParallelCluster 3 集成 ANSYS CFD 计算
- 品牌受众改造:6 个品牌如何应用网红营销
- android混淆那些坑