微信小程序开发与运营
2024-05-16 10:16:33 4 举报AI智能生成
微信小程序
作者其他创作
大纲/内容
微信小程序概述
认识微信小程序
小程序介绍
<span>微信小程序</span>(WeChat Mini Program)是<font color="#e74f4c">腾讯公司</font>于<font color="#e74f4c">2017年2月</font>推出。是一种不需要下载安装即可使用的应用，它实现了应用“<font color="#e74f4c">触手可及</font>”的梦想，用户扫一扫或搜一下即可打开应用。
微信小程序是一种不用下载就能使用的应用，也是一项创新，经过将近两年的发展，已经构造了新的微信小程序<font color="#e74f4c">开发环境</font>和<font color="#e74f4c">开发者生态</font>。微信小程序也是这么多年来中国IT行业里一个真正能够影响到普通程序员的创新成果，已经有超过150万的开发者加入到了微信小程序的开发，与腾讯一起共同发力推动微信小程序的发展，微信小程序应用数量超过了一百万，覆盖200多个细分的行业，日活用户达到两个亿，微信小程序还在许多城市实现了支持地铁、公交服务。微信小程序发展带来更多的就业机会，2017年小程序带动就业104万人，<span><font color="#e74f4c">社会效益</font></span>不断提升。<br>
小程序的特征
快速启动
小程序无需下载和安装，用户可以直接通过扫描二维码或搜索即可使用，大大降低了使用门槛和用户流失率。
低内存占用
小程序相对于传统的原生应用来说，占用的内存更少，对手机性能的要求更低，能够在低端设备上流畅运行。
无需安装
小程序不需要用户手动安装，减少了用户的操作步骤，提高了用户体验。
跨平台支持
小程序可以在多个平台上运行，如微信、支付宝、百度等，开发一次即可在多个平台上使用。
离线访问
小程序可以缓存数据，支持离线访问，即使在没有网络的情况下，用户仍然可以使用一些基本功能。
强大的生态系统
小程序有庞大的用户群体和丰富的生态系统，开发者可以通过小程序平台获取更多的曝光和用户。
小程序应用场景的特点
简单的业务逻辑
低频度的使用场景
微信小程序开发流程
注册小程序账号
<span style="font-size:inherit;">注册方法在微信公众平台官网首页（mp.weixin.qq.com）点击右上角的“立即注册”按钮。</span><br>
选择注册的账号类型 选择“小程序”，点击“查看类型区别”可查看不同类型账号的区别和优势。
填写邮箱和密码 请填写未注册过公众平台、开放平台、企业号、未绑定个人号的邮箱。
激活邮箱 登录邮箱，查收激活邮件，点击激活链接。
微信开发者工具下载及安装
下载安装包
安装微信Web开发者工具
申请小程序管理员账号，获取开发者AppID
小程序管理员授权测试用的微信账号
通过已授权的微信扫描登录开发者工具
新建并导入项目（项目路径+项目名称+AppID）
预览和调试小程序
微信小程序开发者工具界面功能介绍
微信开发者首页
资源管理器
资源管理器用来实现对代码的编辑操作，编辑区中支持对<font color="#4ccbcd">.wxml、.wxss、.js及.json </font>文件的操作，使用组合键能提高代码的编辑效率。常用的组合键。
工具栏
在工具栏中可以实现多种功能，例如账号的切换，模拟区、编辑区、调试区的显示/隐藏，小程序 的编译、预览，切换后台，清理缓存等。
模拟器
在模拟器中选择模拟手机的类型、显示比例、网络类型后，模拟器中会显示小程序的运行效果。
调试器
调试区的功能是帮助开发者进行代码调试及非查有问题的区域。微信小程序系统为开发者提供了13个调试功能模块，分别是Wxml、Console、Sources、Network、Performance、Memory、 AppData、Storage、Security、Sensor、Mock、Audits、Vulnerability。最右边的扩展菜单项“”是定制与控制开发工具按钮。<br>
微信小程序开发基础
小程序的基本目录结构
主体文件
<font color="#4ccbcd">app.js</font>
<font color="#4ccbcd">app.json</font>
<font color="#4ccbcd">app.wxss</font>
页面文件
<font color="#4ccbcd">.js</font>
页面逻辑文件，在该文件中编写JavaSeript代码控制页面的逻辑。该文件在每个小程序的页面中不可缺少。
<font color="#4ccbcd">.wxml</font>
页面结构文件，用于设计页面的布局、数据绑定等，类似HTML页面中的、html文件。该文件在页面中不可缺少。
<font color="#4ccbcd">.wxss</font>
页面样式表文件，用于定义本页面中用到的各类样式表。当页面中有样式表文件时，文件中的样式规则会层叠覆盖app.wxss中的样式规则;否则，直接使用app.wxss中指定的样式规则。该文件在页面中不可缺少。
<font color="#4ccbcd">.json</font>
页面配置文件。该文件在页面中不可缺少。
小程序的开发框架
微信小程序的开发框架是一种用于在微信环境中开发具有原生APP体验服务的工具。整个小程序框架系统主要分为两部分：视图层（View）和逻辑层（App Service）。小程序提供了自己的视图层描述语言WXML和WXSS，以及基于JavaScript的逻辑层框架，并在视图层与逻辑层间提供了数据传输和事件系统，让开发者能够专注于数据与逻辑。<br><br>
视图层
MINA框架的视图层由WXML与WXSS编写，由组件来进行展示。对于微信小程序而视图层就是所有.wxml文件与.wxss文件的集合:.wxml文件用于描述页面的结构:.wxss 文件用于描述页面的样式。
逻辑层
逻辑层用于处理事务逻辑。对于微信小程序面言，逻层就是所有,脚本文件的集合微信小程序在逻辑层将数据进行处理后发送给视图层，同时接受视图层的事件反馈。
创建小程序页面
创建页面文件
配置文件
全局配置文件
页面配置文件
逻辑层文件
项目逻辑文件
页面逻辑文件
页面布局
盒子模型
微信小程序的视图层由WXML和WXSS组成。其中，WXSS(WeiXin Style Sheets)是基于CSS拓展的样式语言，用于描述WXML的组成样式，决定WXML的组件如何显示。WXSS具有CSS的大部分特性，因此，本章将重点讲解CSS中的布局相关内容。
块级元素与行内元素
块级元素
行内元素
浮动与定位
浮动
定位
静态定位
相对定位
绝对定位
固定
flex 布局
容器属性
<font color="#4ccbcd">display</font>
<font color="#4ccbcd">flex-direction</font>
<font color="#4ccbcd">flex-wrap</font>
<font color="#4ccbcd">flex-flow</font>
<font color="#4ccbcd">justify-content</font>
<font color="#4ccbcd">align-items</font>
<font color="#4ccbcd">align-content</font>
项目属性
<font color="#4ccbcd">order</font>
<font color="#4ccbcd">flex-grow</font>
<font color="#4ccbcd">flex-shcink</font>
<font color="#4ccbcd">flex-basis</font>
<font color="#4ccbcd">flex</font>
<font color="#4ccbcd">align-self</font>
页面组件
表单组件
<font color="#4ccbcd">button</font>
<font color="#4ccbcd">radio</font>
<font color="#4ccbcd">checkbox</font>
<font color="#4ccbcd">switch</font>
<font color="#4ccbcd">slider</font>
<font color="#4ccbcd">picker</font>
普通选择器
多列选择器
时间选择器，日期选择器
省市选择器
<font color="#4ccbcd">picker-view</font>
<font color="#4ccbcd">input</font>
<font color="#4ccbcd">textarea</font>
<font color="#4ccbcd">label</font>
<font color="#4ccbcd">form</font>
多媒体组件
<font color="#4ccbcd">image</font>
缩放模式
裁剪模式
<font color="#4ccbcd">audio</font>
<font color="#4ccbcd">video</font>
<font color="#4ccbcd">camera</font>
其他组件
<font color="#4ccbcd">map</font>
<font color="#4ccbcd">canvas</font>
即速应用·
API应用
案例分析-秦岭山水
小程序后端开发
小程序运营
收藏
0 条评论
下一页
