微信小程序开发与运营
2024-05-17 19:49:14 0 举报AI智能生成
登录查看完整内容
微信小程序是一种无需下载、安装，通过微信直接访问的应用程序。本指南全面介绍微信小程序的开发与运营过程。首先，我们将详细介绍微信小程序的开发工具、开发框架、API及组件等核心内容。然后，我们将介绍小程序的运营策略，包括如何提高用户活跃度、留存率及转化率等关键指标。最后，我们将探讨微信小程序的发展趋势和未来机会。通过阅读本指南，你将对小程序开发与运营的各个方面有深入的理解，并能够在实际项目中灵活运用。
作者其他创作
大纲/内容
小程序简介
小程序的特点：无须安装。触手可及，用完即走，无须卸载
小程序的特征
简单的业务逻辑，低频度的使用场景
小程序应用场景的特点
认识微信小程序
注册小程序账号
开发环境准备
微信开发工具的下载及安装
创建第一个小程序项目
运行及发布小程序
微信小程序开发流程
实现多种功能，例如账号切换，小程序编译、清理存缓、预览等
工具栏
在模拟区中选择手机类型、显示比例、网络类型，模拟器会显示运行效果
模拟区
用来实现对代码的编辑操作，编辑区中支持对.wxml、.wxss、.js及.json文件的操作
编辑区
用来显示当前的目录结构
目录文件区
调试区的功能是帮助开发者进行代码调试及排查有问题的区域，小程序系统为开发者提供了9个调试功能模块，分别是Console、Sources、Nekwork、Security、Storage、AppData、Wxml、Sensor和Trace。最右边的扩展菜单项：是控制开发工具按钮。
调试区
微信小程序开发者工具界面功能介绍
微信小程序概述
小程序逻辑页面，主要用来注册小程序全局实例。
app.js
小程序公共配置文件，配置小程序全局设置。
app.json
小程序主样式表文件，类似的HTML的.CSS文件
app.wxss
project.config.json
小程序的基本目录结构
页面结构文件，用于设计页面的布局、数据绑定等。
WXML
页面样式表文件，用于定义本页面中用到的各类样式表
WXSS
视图层
页面逻辑文件，在该文件中编写JavaScript代码控制页面的逻辑
.js
逻辑层
页面临时数据或缓存
wx.getStorage:获取本地数据缓存 wx.setStorage:设置本地数据缓存 wx.clearStorage:清理本地数据缓存
文件存储
网络存储与调用
数据层
小程序的开发框架
设置Pages配置时要注意以下三点：（1）数组的第一项用于设定小程序的初始页面（2）在小程序新准则或减少页面时，都需要对数组进行修改（3）文件名不需要写文件扩展名
pages
widow配置项负责设置小程序状态栏、导航栏、窗口背景等系统样式
window
当需要在程序顶部或底部设置菜单栏时，可以通过taBar配置项来实现
tabBar
小程序中各种网络请求API的超时时间值只能通过networkTimeout配置项统一设置，不能单独在API中设置，显示颜色就近原则。
networkTimenout
用于开发者工具的调试模式，默认为false.
debug
全局配置文件
页面配置文件
配置文件
项目逻辑文件
页面逻辑文件
逻辑层文件
数据绑定
条件数据绑定列表数据绑定
模板
引用页面文件
页面文件
页面结构文件
尺寸单位
样式导入
选择器
常用属性
页面样式文件
微信小程序开发基础
border
盒子模型
块及元素
行内元素
行内快元素
块级元素与行内元素
float: none——默认值，表示元素不浮动； left——元素向左浮动 right——元素向右浮动
元素浮动与清除
浮动与定位
display
flex-direction
flex-wrap
flex-flow
justify-content
align-items
align-content
容器
order属性定义项目的排序顺序，数值越小，排列越靠前，默认值为0
order
flex-grow
flex-shrink
flex-basis
flex
align-self
在该属性值中，除了auto以外，其余属性值和容器align-items的属性值完全一致auto表示继承容器align-items的属性如果没有父元素，则等于stretch（默认值）
项目
flex布局
页面布局
view组件是块级组件，没有特殊功能，主要用于布局展示，相当于HTML 中的 div，是布局中最基本的用户界面(UserInterface，UI)组件，通过设置view 的 CSS属性可以实现各种复杂的布局。view组件的特有属性如表4-1所示
view
【注意】（1）在使用竖向滚动时，如果需要给scroll -view组件设置一个固定高度，可以通过WXSS设置height来完成。（2）请勿在scroll-view组件中使用textarea、map、canvas、video组件。（3）scroll-into-view属性的优先级高于scroll-top。（4）由于在使用scroll-view组件时会阻止页面回弹，所以在scroll-view组件滚动时无法触发onPullDownRefresh。（5）如果要实现页面下拉刷新，请使用页面的滚动，而不是设置scroll-view组件。这样做，能通过单击顶部状态栏回到页面顶部。
通过设置 scroll -view组件的相关属性可以实现滚动视图的功能
scoll-view
swiper组件可以实现轮播图、图片预览、滑动页面等效果。一个完整的swiper组件由< swiper/ >和<swiper -item/>两个标签组成，它们不能单独使用。<swiper/>中只能放置一个或多个<swiper-item/>，若放置其他组件则会被删除;<swiper-item/>内部可以放置任何组件，默认宽高自动设置为100%。
swiper
容器视图组件
icon
text组件用于展示内容，类似HTML中的<span>，text组件中的内容支持长按选中，支持转义字符\"\\\"，属于行内元素
text
progress组件用于显示进度状态，如资料加载，用户资料完成度。媒体资料播放进度等。progress组件属于块级元素
progress
基础内容组件
button
单选框用来从一组选项中选取一个选项。在小程序中，单选框由<radio=group/>（单项选择器)和<radio/>（单选项目）两个组件组合而成，一个包含多个<radio/>的<radio —group/>表示一组单选项，在同一组单选项中<radio/>是互斥的，当一个按钮被选中后，之前选中的按钮就变为非选
radio
复选框用于从一组选项中选取多个选项，小程序中复选框由<checkbox-group/>（多项选择器)和<checkbox/>（多选项目）两个组件一个<checkbox-group/>表示一组选项，可以在一组选项中选中多个选项。
checkbox
swich组件的作用类似开关选择器，
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组件为图像组件，与HTML中的 <img/ >类似，系统默认image组件的宽度为300 px、
image
audio组件用来实现音乐播放、暂停等，
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
其他组件
页面组件
无须编程
行业模板多样
功能丰富，管理方便
优势
布局组件 ：双栏，面板，自由面板，顶部导航，底部导航，分割线，动态分类
基本组件 ：文件，图片，按钮，标题，轮播，分类，图片列表，图文集，视频
动态列表，个人中心，动态表单，评论，计数
城市定位，悬浮窗
高级组件
其他组件 音频，动态容器
应用组件
数据总览
分享设置
用户管理
应用数据
轮播管理
分类管理
商品管理
经营管理
营销工具
多商家管理
后台管理
即速应用
接口用于发起HTTPS 请求。
Wx.request(Object)
接口用于将本地资源上传到后台服务器
Wx.uploadFlie(Object)
接口用于下载文件资源到本地。
Wx.downloadFlie(Object)
网络API
接口用于创建一个WebSocket连接。
wx.chooseImage(Object)
接口用于实现通过WebSocket连接发送数据。
wx.priviewImage(Object)
接口用于关闭WebSocket连接。
wx.getImageInfo(Object)
接口用于监听WebSocket连接打开事件。
wx.saveImageToPhotosAIbum(Object)
图片API
接口用于监听WebSocket错误。
wx.starRecord(Object)
接口用于实现监听WebSocket接收到服务器的消息事件。
wx.stopRecord(Object)
录音API
wx.playVoice(Object)
wx.pauseVoice(Object)
wx.stopVoice(Object)
音频播放控制API
wx.playBackgroundAudio(Object)
wx.getBackgroidPlayerState(Object)
wx.seekBackgroundAudio(Object)
wx.pauseBackgroundAudio()
wx.stopBackgroundAudio()
wx.onBackgroundAudioPlay(CallBack)
wx.onBackgroundAudioPause(CallBack)
wx.onBackgroundAudioStop(CallBack)
音乐播放控制API
多媒体API
接口用于保存文件到本地。
wx.saveFlie(Object)
接口用于获取本地已保存的文件列表。
wx.getSavedFlieLise(Object)
接口用于获取本地文件的文件信息。
wx.getSaveFlieInfo(Object)
接口用于删除本地存储的文件。
wx.removsSaveFlie(Object)
接口 用 于新开页面打开文档，支持格式:doc、xls、 ppt、pdf、docx、xlsx、ppts。
wx.openDocument(Object)
文件API
接口用于设置缓存数据。
接口用于获取缓存数据
wx.getStoage(Object)或wx.getStorageSync(key)
接口用于删除指定缓存数据。
wx.removeStoage(Object)或wx.removeStorageSync(key)
接口用于清除缓存数据。其中，带Syne后缀的为同步接口，不带Sync后缀的为异步接口。
wx.clearStoage()或wx.clearStorageSync()
本地数据及缓存API
接口 用于获取位置信息。
wx.getLocation(Object)
接口 用于选择位置信息。
wx.chooseLocation(Object)
接口J用于通过地图显示位置。
wx.openLocation(Object)
位置信息API
接口用于获取系统信息。
wx.getSystemlnfo(Object)wx.getSystemInfoSync()
接口用于获取网络类型。
wx.getNetworkType(Object)
接口用于监测网络状态改变。
wx.onNetworkStatusCahange(CallBack)
接口用于拨打电话。
wx.makePhoneCall(Object)
接口用于扫描二维码。
wx.scanCode(Object)
设备相关API
API应用
创建数据文件
创建项目目录结构
准备工作
index.js
index.wxml
index.wxss
index.json
首页
detail.js
内容页
index.-all.js
index.-all.wxml
index.-all.wxss
index.-all.json
详情页
booking.js
booking.wxml
booking.wxss
booking.json
预约页
案例分析——秦岭山水
注册Bmob账号
进入后台，单击左边的“应用”图标，会出现已经创建的应用项目列表和“创建应用按钮”。单击“创建应用”按钮，出现如图8-3填写完成应用的相关信息后即可创建一个等待开发的应用
创建应用
进入后台，选择应用项目，单击\"设置\"=>“应用配置”选项，将小程序中的AppID(小程序ID)和APPSecret(小程序密钥)
配置小程序密钥
单击进入后台，选择应用项目，单击“设置”→“应用密钥”选项，可以直接获取应用项目的Application ID和SecretKey（在小程序开发中需要使用）
获取服务器域名及在小程序重配置
比目后端云简介
在“test”表中添加 id、title、content、imag e 列，Bmob提供Number、String、Boolean、 Date、File、Geopoint、Array、Object、Pointer、Rel ation 共10种字段类型，
创建表及字段
添加一条记录用来实现把从前端获取的数据添加到服务端数据表中，主要用Bmob提供的SDK对象实现。
添加一条记录
获取一条记录是指从数据表中查询一条记录，主要根据objectId值来直接获取单条数据对象。
获取一条记录
如果要修改一条记录，则首先需要获取更新后的Bmob. Object对象，将值修改后保存数据就可以了。
修改一条记录
删除一条记录可以使用Bmob.Object的destroy方法。
删除一条记录
为了获取某个数据表中的所有数据，我们可以通过Bmob提供的Query对象来实现
查询所有数据
Bmob中提供的查询方法主要有：等于（equalTo）、不等于（notEqualTo）、小于（lessThan）、小于等于（lessThanOrEqualTo）、大于（greaterThan）、大于等于（greaterThanOrEqualTo）等。
条件查询
如果在数据比较多的情况下，希港将查询出的符合要求的所有数据按照指定条数为一页来显示，这时可以使用lmit方法限制查询结果的数据条数来进行分页。默认情况下，limit的值为10，最大有效设置值为1000
分页查询
数据的增，删，改，查
Bmob提供了文件后端保存功能。利用这一功能，我们可以把本地文件上传到Bmob后台，并按上传日期为文件命名。
上传一张图片并显示
Bmob支持一次上传多张图片，并将图片保存到素材库中。
上传多张图片并显示
上传图片
留言板是一款能实现浏览留言、发表留言、删除留言和编辑留言的小程序，用户能够浏览当前的已留言内容，并且能按照时间的升序来查看最新的留言内容；能够发表自己的留言内容，在留言发表页填写相关项后即可发表，并能查看到新留言内容；能够删除不需要的留言；能够修改留言内容。因此，简单留言板的功能主要为显示留言、发表留言、删除留言和编辑留言
需求分析
根据功能需求分析，共设计4个页面：首页（显示留言页）、发表留言页、编辑留言页和详情页。
视图层分析
根据留言板功能，设计数据库表名为test，其中设计的字段有id（编号）、title（标题）、content（内容）、image（图像）、count（次数）5个字段，通过Bmob后端云设计。
数据库设计
代码实现
简单留言板
小程序后端开发
附近的小程序入口
通过关键词推广
通过公众号关联方式推广
通过好友分享，社群和朋友圈推广
线上运营推广方式
通过特定场景做线下推广
通过已有的门店做线下推广
通过地面推广的方式做线下推广
线下运营推广方式
小程序商店，公众号
新媒体软文
运营公司推广
第三方推广
转化率高
数据准确
门槛更低
合理裂变
小程序营销优势
小程序运营案例
小程序运营
自由主题
微信小程序开发与运营
收藏
0 条评论
回复 删除
下一页
