微信小程序开发与运营
2024-05-15 19:52:19 3 举报AI智能生成
小程序
作者其他创作
大纲/内容
简介：小程序嵌入微信中，不需要下载安装外部应用，用户通过扫描二维码和搜索相关功能的关键词即可 使用，具备无须安装，触手可及，用完即走，无需卸载的特性。
小程序简介
1.无须安装小程序内嵌于微信程序之中，用户在使用过程中无须在应用商店下载安装外部应用。2.触手可及用户通过扫描二维码等形式直接进人小程序，实现线下场景与线上应用的即时联通3.用完即走用户在线下场景中，当有相关需求时，可以直接接入小程序，使用服务功能后便可以对其不理会，实现用完即走。4.无须卸载用户在访问小程序后可以直接关闭小程序，无须卸载。
小程序的特征
简单的业务逻辑：简单是指应用本身的业务逻辑并不复杂。低频度的使用场景：低频度是小程序使用场景的另一个特点。
小程序应用场景的特点
认识微信小程序
注册小程序账号
开发环境准备
微信开发工具的下载及安装
创建第一个小程序项目
运行及发布小程序
微信小程序开发流程
在工具栏中可以实现多种功能，例如账号的切换，模拟区、编辑区、调试区的显示/隐藏。小程序的编译、预览，切换后台，清理缓存等。
工具栏
在模拟区中选择模拟手机的类型、显示比例、网络类型后，模拟器中会显示小程序的运行效果
模拟区
编辑区用来实现对代码的编辑操作，编辑区中支持对wxml、.wxss、.s 及ison 文件的操作，使用组合键能提高代码的编辑效率。
编辑区
目录文件区用来显示当前项目的目录结构，单击左上角的“+”按钮可以进行目录和文件的创建，右键单击目录文件区中的文件或目录可以进行“硬盘打开”“重命名”“删除”等相关操作。
目录文件区
调试区的功能是帮助开发者进行代码调试及排查有问题的区域。小程序系统为开发者提供了9 个调试功能模块，分别是 Console、Sources、Network、Security、Storage、AppData.Wxml、Sensor 和Trace。
调试区
微信小程序开发者工具界面功能介绍
微信小程序概述
小程序逻辑文件，主要用来注册小程序全局实例。在编译时，app.js 文件会和其他页面的逻辑文件打包成一个 JavaSeript 文件。该文件在项目中不可缺少
app.js
小程序公共设置文件配置小程序全局设置。该文件在项目中不可缺少
app.json
小程序主样式表文件，类似HTML的Scss文件。在主样式表文件中设置的样式在其他页面文件中同样有效。该文件在项目中不是必需的。
app.wxss
project.config.json
小程序的基本目录结构
wxml 文件用于描述页面的结构
WXML
wxss 文件用于描述页面的样式
WXSS
视图层
.js
逻辑层
页面临时数据或缓存
使用数据API接口，如下:wxgetStorage 获取本地数据缓存。wxsetStorage设置本地数据缓存。wxclearStorage清理本地数据缓存。
文件存储
上传于下载文件API接口，如下：wxrequest发起网络请求。wxuploadFile 上传文件。wxdownloadFile 下载文件。 调用URL的API接口，如下：wxnavigateTo 新窗口打开页面。wx.redirectTo 原窗口打开页面。
网络存储与调试
数据层
小程序的开发框架
pages 配置项是必填项设置pages 配置项时，应注意以下3点:(1)数组的第一项用于设定小程序的初始页面(2)在小程序中新增或减少页面时，都需要对数组进行修改(3)文件名不需要写文件扩展名。小程序框架会自动寻找路径及对·js、json、wxml和wxss 文件进行整合数据绑定。
pages
window 配置项负责设置小程序状态栏、导航条、标题、窗口背景色等系统样式。window配置项可以配置的对象参考表。
window
当需要在程序顶部或底部设置菜单栏时，可以通过配置 tabBar 配置项来实现。tabBar 配置项可以配置的属性如表所示
tabBar
小程序中各种网络请求API的超时时间值只能通过 networkTimeout 配置项进行统一设置不能在API中单独设置。networkTimeout 可以配置的属性如表所示。
networkTimeout
debug 配置项用于开启开发者工具的调试模式，默认为 false。开启后，页面的注册、路由、数据更新、事件触发等调试信息将以 info 的形式输出到 Console (控制台) 面板上。
debug
全局配置文件
页面配置文件(*.json)只能设置本页面的窗口表现，而且只能设置 window配置项的内容。在配置页面配置文件后，页面中的window 配置值将覆盖全局配置文件(app.json)中的配置值。
页面配置文件
配置文件
项目逻辑文件 app.js中可以通过App()函数注册小程序生命周期函数、全局属性和全局方法，已注册的小程序实例可以在其他页面逻辑文件中通过getApp()获取。
项目逻辑文件
页面逻辑文件的主要功能有:设置初始数据;定义当前页面的生命周期函数;定义事件处理函数等。每个页面文件都有一个相应的逻辑文件，逻辑文件是运行在纯JavaScript 引擎中。因此，在逻辑文件中不能使用浏览器提供的特有对象(document、window)及通过操作DOM 改变页面，只能采用数据绑定和事件响应来实现。
页面逻辑文件
逻辑层文件
简单绑定是指使用双大括号((111)将变量包起来，在页面中直接作为字符串输出使用。简单绑定可以作用于内容、组件属性、控制属性等的输出。【注意】：简单绑定作用于组件属性、控制属性时，双大括号外应添加双引号。
简单绑定
在{{}}内可以做一些简单的运算(主要有算术运算、逻辑运算、三元运算、字符串运算等)，这些运算均应符合JavaScript 运算规则。
运算
小程序在进行页面数据绑定时、框架会将WXML文件与逻辑文件中的 data 进行动态绑定，在页面中显示data中的数据。小程序的数据绑定使用Mustache语法({{}})将变量或 运算规则包起来。
数据绑定
条件数据绑定就是根据绑定表达式的逻辑值来判断是否数据绑定当前组件。wx:if条件数据绑定wx:if条件数据绑定是指使用wx:if这个属性来判断是否数据绑定当前组件。block wx:if条件数据绑定当需要通过一个表达式去控制多个组件时，可以通过<block>将多个组件包起来，然后在<block>中添加 wx:if属性即可。
条件数据绑定
列表数据绑定用于将列表中的各项数据进行重复数据绑定。1.wx.for在组件上，可以使用 wx:for 控制属性绑定一个数组，将数据中的各项数据循环进行数裤绑定到该组件，格式如上:
2.block wx:for与 block wx:if类似，在wxml中也可以使用<block>包装多个组件进行列表数据绑定.
列表数据绑定
定义模板模板代码由wxml组成，因此其定义也是在wxml文件中，定义模板的格式为:
调用模板将模板定义后，就可以对其进行调用了。调用模板的格式为:< template is＝ \"模板名称\" data == \"{{传入的数据}}\" />其中，<template>为模板标签;is属性用于指定要调用的模板名称;data属性定义要传人的数据，如果模板中不需要传人数据，data属性可以省略。
模板
import方式include方式
引用页面文件
定义事件函数在.js文件中定义事件函数来实现相关功能，当事件响应后就会执行事件处理代码。调用事件 调用事件也称为注册事件。调用事件就是告诉小程序要监听哪个组件的什么事件，通常在页面文件中的组件上注册事件。事件的注册(同组件属性)，以“key=value形式出现，key(属性名)以bind或 catch 开头，再加上事件类型，如 bindtap、catchlongtap。其中，bind开头的事件绑定不会阻止冒泡事件向上冒泡，catch开头的事件绑定可以阻止冒泡事件向上冒泡。value(属性值)是在js中定义的处理该事件的函数名称，如click。冒泡事件 冒泡事件是指某个组件上的事件被触发后，事件会向父级元素传递，级元素再向其父级元素传递，一直到页面的顶级元素。非冒泡事件 非冒泡事件是指某个组件上的事件被触发后，该事件不会向父节点传递在WXML中，冒泡事件有6个，如表所示。
页面事件
页面结构文件
尺寸单位
样式导入
选择器
常用属性
页面样式文件
微信小程序开发基础
border
内容的宽度和高度。
盒子模型
块级元素的特点如下:(1)一个块级元素占一行。(2)块级元素的默认高度由内容决定，除非自定义高度。(3)块级元素的默认宽度是父级元素的内容区宽度，除非自定义宽度(4)块级元素的宽度、高度、外边距及内边距都可以自定义设置:(5)块级元素可以容纳块级元素和行内元素。<view/>组件默认为块级元素，使用<view/>组件演示盒子模型及块级元素的示例代码如下:
块级元素
行内元素的特点如下:(1)行内元素不能被设置高度和宽度，其高度和宽度由内容决定。(2)行内元素内不能放置块级元素，只级容纳文本或其他行内元素(3)同一块内，行内元素和其他行内元素显示在同一行。<text/>组件默认为行内元素，使用<view/>及<text>组件演示盒子模型及行内元素的示例代码如下:
行内元素
行内块元素可以被设置高度、宽度、内边距和外边距。示例代码如下:
行内块元素
块级元素与行内元素
其中，none--默认值，表示元素不浮动:lef--元素向左浮动;night--元素向右浮动。在下面的示例代码中，分别对box1、box2、box3元素左浮动:
float:none|left|right
lef--清除左边浮动的影响，也就是不允许左侧有浮动元素；nght--清除右边浮动的影响，也就是不允许右侧有浮动元素；both--同时清除左右两侧浮动的影响;none--不清除浮动。
clear:left|right|both|none
元素浮动与清除
默认值，该元素按照标准流进行布局;
static
相对定位，相对于它在原文档流的位置进行定位，它后面的盒子仍以标准流方式对待它;
relative
绝对定位，相对于其上一个已经定位的父元素进行定位，绝对定位的盒子从标准流中脱离，它对其后的兄弟盒子的定位没有影响;
absolute
固定定位，相对于浏览器窗口进行定位。
fixed
元素定位
浮动与定位
display
flex-direction
用来指定项目在一根轴线的排列位置不够时，项目是否换行，其语法格式为：
flex-wrap
flex-flow
justify-content 用于定义项目在主轴上的对齐方式。 语法格式如下:
justify-content
align-items
align-content
容器
order
flex-grow
flex-shrink
flex-basis
flex
属性用来指定单独的伸缩项目在交叉轴上的对齐方式。 该属性会重写默认的对齐方式。 语法格式如下:
align-self
项目
flex布局
页面布局
运行结果
在index.wxml中写入代码：
view
在index.js中写入代码：
在index.wxss中写入代码：
通过设置scroll-view组件的相关属性可以实现滚动视图的功能，
scroll-view
概念：swiper组件可以实现轮播图、图片预览、滑动页面等效果。一个完整的swiper组件由<swiper/ >和<swiper-item/ >两个标签组成，它们不能单独使用。<swiper/ >中只能放置一个或多个<swiper-item/ >，若放置其他组件则会被删除；<swiper-item/ >内部可以放置任何组件，默认宽高自动设置为100%。
swiper
容器视图组件
icon组件即图标组件，通常用于表示一种状态，如success、info、warn、waiting、cancel等。
icon
text
progress组件用于显示进度状态，如资源加载、用户资料完成度、媒体资源播放进度等。progress组件属于块级元素
progress
基础内容组件
button 组件用来实现用户和应用之间的交互，同时按钮的颜色起引导作用。一般来说在一个程序中一个按钮至少有3种状态:默认点击(default)、建议点击(primary)、谨慎点击(wam)。在构建项目时，应在合适的场景使用合适的按钮，当<buton>被<form/>包裹时，可以通过设置form-type属性来触发表单对应的事件
button
概念：单选框用来从一组选项中选取一个选项。在小程序中，单选框由<radio-group/ >（单项选择器）和<radio/ >（单选项目）两个组件组合而成，一个包含多个 <radio/ >的<radio-group/ >表示一组单选项，在同一组单选项中<radio/ >是互斥的，当一个按钮被选中后，之前选中的按钮就变为非选。
radio
概念：复选框用于从一组选项中选取多个选项，小程序中复选框由 <checkbox -group/ >（多项选择器）和<checkbox/ >（多选项目）两个组件组合而成。一个<checkbox-group/ >表示一组选项，可以在一组选项中选中多个选项
checkbox
switch组件的作用类似开关选择器
switch
概念：slider组件为滑动选择器，可以通过滑动来设置相应的值
slider
概念：picker组件为滚动选择器，当用户点击picker组件时，系统从底部弹出选择器供用户选择。picker组件目前支持5种选择器，分别是：selector（普通选择器）、multiSelector（多列选择器）、time（时间选择器）、date（日期选择器）、region（省市选择器）。
picker
概念：picker-view组件为嵌入页面的滚动选择器。相对于picker组件，picker-view组件的列的个数和列的内容由用户通过<picker-view-column/ >自定义设置。
picker-view
input组件为输入框，用户可以输入相应的信息
input
textarea组件为多行输入框组件，可以实现多行内容的输入。
textarea
label
概念：form组件为表单组件，用来实现将组件内的用户输入信息进行提交。当<form/ >表单中formType为submit的<button/ >组件时，会将表单组件中的value值进行提交。
form
表单组件
image
audio组件用来实现音乐播放.暂停等，其属性如表4-22所示。
audio
video
camera组件为系统相机组件，可以实现拍照或录像功能。在一个页面中，只能有一个camera组件。在开发工具中运行时，使用电脑摄像头实现拍照或录像；在手机中运行时，使用手机前后摄像头实现拍照或录像。
camera
多媒体组件
概念：map组件用于在页面中显示地图或路径，常用于LBS（基于位置服务）或路径指引，功能相对百度地图、高德地图较简单，目前具备绘制图标、路线、半径等能力，不能在croll-view、swiper、picker-view、movable-view组件中使用。
map
canvas组件用来绘制图形，相当于一块无色透明的普通图布。canvas组件本身并没有绘图能力，仅仅是图形容器，通过绘图API实现绘图功能。在默认情况下，canvas组件的默认宽度为300 px，高度为225 px，同一页面中的canvas-id不能重复，否则会出错。canvas组件的属性如表4-28所示。
canvas
其他组件
页面组件
无须编程
行业模板多样
功能丰富，管理方便
优势
布局组件 双栏，面板，自由面板，顶部导航，底部导航，分割线，动态分类
基本组件 文本，图片，按钮，标题，轮播，分类，图片列表，图文集，视频
动态列表，个人中心，动态表单，评论，计数
城市定位，悬浮窗
高级组件
其他组件 音频，动态容器
应用组件
数据总览
分享设置
用户管理
应用数据
轮播管理
分类管理
商品管理
经营管理
营销工具
多商家管理
后台管理
即速应用
wx.request(Object)
wx.uploadFile(Object)
wx.downloadFile(Object)
网络API
图片API
录音API
音频播放控制API
音乐播放控制API
多媒体API
文件API
保存数据
获取数据
删除数据
清空数据
本地数据及缓存API
获取位置信息
选择位置信息
显示位置信息
位置信息API
获取系统信息
网络状态
拨打电话
扫描二维码
设备相关API
API应用
创建数据文件
创建项目目录结构
准备工作
index.js
index.wxml
index.wxss
index.json
首页
detail.js
detail.wxml
detail.wxss
detail.json
内容页
detail-all.js
detail-all.wxml
detail-all.wxss
detail-all.json
详情页
booking.js
booking.wxml
booking.wxss
booking.json
预约页
案例分析——秦岭山水
注册Bmob账号
创建应用
配置小程序密钥
获取服务器域名及在小程序中配置
比目后端云简介
创建表及字段
添加一条记录
获取一条记录
修改一条记录
删除一条记录
查询所有数据
条件查询
分页查询
数据的增，删，改，查
上传一张图片并显示
上传多张图片并显示
上传图片
需求分析
视图层设计
数据库设计
代码实现
简单留言板
小程序后端开发
附近的小程序入口
通过关键词推广
通过公众号关联方式推广
通过好友分享，社群和朋友圈推广
线上运营推广方式
通过特定场景做线下推广
通过已有的门店做线下推广
通过地面推广的方式做线下推广
线下运营推广方式
小程序商店，公众号
新媒体软文
运营公司推广
第三方推广
转化率高
数据准确
门槛更低
合理裂变
小程序营销优势
小程序运营案例
小程序运营
微信小程序开发与运营
收藏
0 条评论
回复 删除
下一页
