微山网站建设哪家便宜,公司网页图片,网站经营性备案条件,监理网站文章目录**一、什么是小程序****1.1** **小程序简介****1.2** **小程序的特点****1.3** **小程序的开发流程**个人小程序和企业小程序的区别1.4 小程序代码构成1.4.1 JSON 配置1.4.2 WXML 模板**数据绑定**逻辑语法条件逻辑列表渲染模板引用共同属性1.4.3 WXSS 样式1.4.4 JS 逻…
文章目录**一、什么是小程序****1.1** **小程序简介****1.2** **小程序的特点****1.3** **小程序的开发流程**个人小程序和企业小程序的区别1.4 小程序代码构成1.4.1 JSON 配置1.4.2 WXML 模板**数据绑定**逻辑语法条件逻辑列表渲染模板引用共同属性1.4.3 WXSS 样式1.4.4 JS 逻辑交互模块化1.5 小程序宿主环境1.5.1 渲染层和逻辑层1.5.2 程序与页面1.5.3 组件1.5.4 API二、Vue简介**2.1 Vue**的定义2.2 Vue的特点**2.3 Vue**的使用2.4 MVVM软件架构模式三、uniapp3.1 什么是uni-app3.2 快速上手3.2.1 创建uni-app3.2.2 uni-app工程目录结构3.2.3 页面简介新建页面删除页面应用首页页面生命周期组件生命周期路由路由跳转页面栈相互引用3.2.4 运行uni-app3.2.5 发布uni-app打包为原生App发布为Web网站发布为微信小程序四、 unicloud4.1uniCloud是什么和不是什么4.2 什么是serverless4.3 基本概念4.3.1服务空间4.3.2云数据库4.3.3云函数/云对象4.4 快速上手4.4.1 创建uniCloud项目4.4.2 关联服务空间4.4.3 创建云函数/云对象五、 项目案例4.4 快速上手4.4.1 创建uniCloud项目4.4.2 关联服务空间4.4.3 创建云函数/云对象五、 项目案例一、什么是小程序
1.1 小程序简介
小程序是一种新型的应用程序它是运行在移动设备上的应用程序用户可以在不下载和安装应用的情况下直接使用。
1.2 小程序的特点
快速启动小程序无需下载和安装用户可以直接通过扫码或搜索进入小程序。轻量级小程序的体积相对较小不会占用太多存储空间可以随时随地使用。原生体验小程序采用原生技术开发可以提供更加流畅的用户体验。易于分享小程序可以通过二维码、微信分享等方式进行传播可以快速扩大影响力。
1.3 小程序的开发流程
小程序的开发流程主要包括以下几个步骤 注册小程序账号注册小程序账号获取小程序开发资格。 开发小程序的第一步需要拥有一个小程序 AppID后续的所有开发流程会基于这个 AppID 来完成。小程序的注册非常简单只需几个操作。 使用浏览器打开 https://mp.weixin.qq.com/ 点击立即注册
个人小程序和企业小程序的区别
一注册时的区别 个人版的注册需要的“资质”极少几乎只要个人的身份信息就可以。注册流程简化许多。
企业版的注册则繁琐许多需要提供管理者的身份信息的同时企业的各项资质、对公账号、企业验证等等要提供一系列的证明和验证。
个人版的注册时不需要收取300元的 认证费用的(因为个人版暂时不支持 认证)
企业版的 认证就需要收取300元
二开发的小程序性质不同 接口限制
个人主体的小程序肯定是无法完整地使用小程序的接口和能力的具体哪些接口用不了呢?
微信支付
如需使用微信支付就必须先开通微信支付商户账号而开通商户号必须是具备企业资格个人资质无法开通商户账号。
如小程序需要接入微信支付小程序本身必须要经过微信认证才行而个人主体注册的小程序是不支持认证的。
所以这是一个限制个人主体注册的小程序不能使用微信支付!
卡券
在微信里卡券的分类众多其中就包含了具有储值功能会员卡像这种会员卡涉及到用户财产安全的接口肯定会受到严格的监管而个人主体注册的小程序风险大微信自然不能让你使用。
获取微信用户绑定的手机号码
微信在近期更新中开放了快速填写手机号直接获取用户微信绑定的手机号码功能。
但目前这个接口仅开放给已通过微信认证的小程序使用;尚未认证的组织类小程序和个人主体小程序都无法使用这个功能。
4.个人版附近小程序是没办法显示
附近小程序是根据营业执照注册地址定位的。
三企业高级接口 接口一OAuth2.0网页授权、获取用户基本信息
这两个接口是此次开放对于微网站类应用最重要的技术保证在OAuth2.0接口的支援下可做到真正的微信用户状态保持、信息拉取(昵称、性别、 地区 等)可真正实现微网站用户免注册。该接口目前唯一的不爽是只 能在微信环境内使用但是相信随着微信开放程度加强、同类竞争对手的进入该接口应该会更加开放。不过仅仅目前的开放程度已经足够我们把微网站做得更 好。
接口二客服接口
该接口是简化版的“消息下发接口”曾今也是第三方开发公司梦寐以求的接口之一其基本应用原理是当用户主动发送一条信息给公众平台后公众平台可 在24小时内无限的向该用户推送消息。此接口最重要的产品应用就是可以开发类似QQ或旺旺一样的微信客服系统。另外也为自动回复机器人的应用也带来 了更多的想象空间。
接口三生成带参数二维码
该接口可以实现大家一直期盼的扫码场景
场景一以微信生意宝的客户“Logitech/罗技”为例罗技公司在全国有N多家代理门店利用该接口罗技公司可以对不同的门店设置不同的微信二维码这样就可以判断出粉丝是在哪家门店扫码关注的了这也是运营人员的福音。
场景二例如公司官网上有多个活动都在通过二维码推广公众平台如何统计出哪个活动带来的新粉丝最多?利用这个接口这个问题也就不是问题咯~~
所以此接口必将成为一个微信推广利器不过腾讯目前对这个接口稍作了限制目前微信最多只支持生成1000个永久参数的二维码但是可以无限制生成带临时参数的二维码(临时参数有效期30分钟)。
接口四获取用户地理位置
O2O服务最具有科技感的服务形式就是基于位置提供不同的服务、给用户提供不同的信息该接口区别于目前微信聊天窗口中发送地理位置的功能最大 的区别的是该接口是以事件的形式自动上报给公众平台的用户无法作假也无须操作(当然一开始需要用户授权同意)。该接口开放后可以给其他接口服务提 供前 置参数由此可实现很多基于地理位置的组合应用例如实现景点微信导游当用户走到不同的地方发送个“导游”两个字给公众平台系统将自动推送给用户 当前的景点信息如果这个功能和客服系统对接就可自动实现按照客户目前所在的区域自动分流。
接口五获取关注者列表、用户分组接口
这两个接口可以配合获取用户基本信息接口让微信用户可以脱离微信后台直接在微网站后台进行客户的维护与管理使得微网站后台更加实用高效。
接口六语音识别
应该说这个接口是腾讯为我们提供的下酒小菜如果合理应用可做出更多有意思的应用和游戏。他的基本流程是这样的用户向聊天窗口发送语音信息微 信会把识别的文字结果也反馈给微信生意宝系统这样就等同于发送了文字消息。比如以后用户想要回复微网站的首页除了可以输入文字“首页”或图标外用 户也可以对着手机大喊一声“芝麻开门”也能出现微网站首页。
以上是微信新开放的接口简单说明除了这些高级接口其实还有一些我们现在已经在使用的操作微信的客户端的脚本接口正式开放例如隐藏微信中网页右 上角按钮隐藏微信中网页底部导航栏等另外网页获取用户网络状态的接口对于微网站应用还是比较重要的我们可以识别用户当前使用的是wifi还是3g 网络以便决定信息怎么展示帮助用户省流量、省钱。另外对于HTML5应用该状态的获取可充分发掘HTML5本地应用程序的威力。 开发小程序使用小程序开发工具进行开发包括界面设计、数据管理、业务逻辑等方面。安装开发者工具 在小程序开发文档中找到小程序开发工具的下载页面或者直接输入 https://mp.weixin.qq.com/debug/wxadoc/dev/devtools/download.html 根据自己的操作系统下载对应的安装包进行安装。需要注意的是小程序开发工具在 Windows上仅支持 Windows 7 及以上版 提交审核将开发完成的小程序提交到微信小程序平台进行审核。 发布上线审核通过后可以将小程序发布上线供用户使用。
1.4 小程序代码构成 .json 后缀的 JSON 配置文件 .wxml 后缀的 WXML 模板文件 .wxss 后缀的 WXSS 样式文件 .js 后缀的 JS 脚本逻辑文件
1.4.1 JSON 配置
JSON 是一种数据格式并不是编程语言在小程序中JSON扮演的静态配置的角色。
相比于XML JSON格式最大的优点是易于人的阅读和编写通常不需要特殊的工具就能读懂和修改是一种轻量级的数据交换格式。
JSON文件都是被包裹在一个大括号中 {}通过key-value的方式来表达数据。
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-FJb8ieRb-1677491373212)(C:\Users\Administrator\AppData\Local\Temp\1677412175702.png)]
JSON的Key必须包裹在一个双引号中在实践中编写 JSON 的时候忘了给 Key 值加双引号或者是把双引号写成单引号是常见错误。
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-l63RH5IN-1677491373220)(C:\Users\Administrator\AppData\Local\Temp\1677412214164.png)]
JSON的值只能是以下几种数据格式
数字包含浮点数和整数字符串需要包裹在双引号中Bool值true 或者 false数组需要包裹在方括号中 []对象需要包裹在大括号中 {}Null
其他任何格式都会触发报错例如 JavaScript 中的 undefined 。
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-UtsiaAEK-1677491373223)(C:\Users\Administrator\AppData\Local\Temp\1677412273203.png)]
还需要注意的是 JSON 文件中无法使用注释试图添加注释将会引发报错。
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-EtXIQAoO-1677491373225)(C:\Users\Administrator\AppData\Local\Temp\1677412317671.png)]
1.4.2 WXML 模板
WXML 全称是 WeiXin Markup Language是小程序框架设计的一套标签语言结合小程序的基础组件、事件系统可以构建出页面的结构。
从事过网页编程的人知道网页编程采用的是 HTML CSS JS 这样的组合其中 HTML 是用来描述当前这个页面的结构CSS 用来描述页面的样子JS 通常是用来处理这个页面和用户的交互。
同样道理在小程序中也有同样的角色其中 WXML 充当的就是类似 HTML 的角色。
一个完整的 WXML语句由一段开始标签和一段结束标签组成在标签中可以是内容也可以是其他的 WXML 语句这一点上同 HTML 是一致的。有所不同的是WXML 要求标签必须是严格闭合的没有闭合将会导致编译错误。
标签可以拥有属性属性提供了有关的 WXML元素更多信息。属性总是定义在开始标签中除了一些特殊的属性外其余属性的格式都是key“value” 的方式成对出现。需要注意的是WXML中的属性是大小写敏感的也就是说 class 和 Class 在WXML中是不同的属性代码2-3是一个文本标签的示例。
数据绑定
用户界面呈现会因为当前时刻数据不同而有所不同或者是因为用户的操作发生动态改变这就要求程序的运行过程中要有动态的去改变渲染界面的能力。在 Web 开发中开发者使用 JavaScript 通过Dom 接口来完成界面的实时更新。在小程序中使用 WXML 语言所提供的数据绑定功能来完成此项功能。
先看一个简单的例子。
数据绑定示例
!--pages/wxml/index.wxml--
text当前时间{{time}}/text保存后工具刷新模拟器并没有显示出当前的时间这是因为我们并没有给 time 设置任何初始值请打开 index.js 文件在 data 的大括号中加入time: (new Date()).toString()。
数据绑定示例
// pages/wxml/index.js
Page({/*** 页面的初始数据*/data: {time: (new Date()).toString()},
})保存模拟器刷新后正确的展示了当前时间并且每次编译时间都会被更新。
WXML 通过 {{变量名}} 来绑定 WXML 文件和对应的 JavaScript 文件中的 data 对象属性。
后文中为了保持简单通过以下格式来展示上述的代码逻辑使用第一段注释来表明 WXML 对应的脚本文件中的 data 结构。
!--
{time: (new Date()).toString()
}
--
text当前时间{{time}}/text属性值也可以动态的去改变有所不同的是属性值必须被包裹在双引号中如下
属性值的绑定
!-- 正确的写法 --
text data-test{{test}} hello world/text!-- 错误的写法 --
text data-test{{test}} hello world /text 需要注意的是变量名是大小写敏感的也就是说 {{name}} 和 {{Name}} 是两个不同的变量。
代码清单2-9 绑定的变量大小写敏感
!--
{w: w,W: W
}
--view{{w}}/view
view{{W}}/view!-- 输出
w
W
--还需要注意没有被定义的变量的或者是被设置为 undefined 的变量不会被同步到 wxml 中如代码2-10所示。
代码清单2-10 undefined值不会被输出到 wxml 中
!--
{var2: undefined,var3: null,var4: var4
}
--view{{var1}}/view
view{{var2}}/view
view{{var3}}/view
view{{var4}}/view!--
输出
null
var4
--逻辑语法
通过 {{ 变量名 }} 语法可以使得 WXML 拥有动态渲染的能力除此外还可以在 {{ }} 内进行简单的逻辑运算。
三元运算
!-- 根据 a 的值是否等于 10 在页面输出不同的内容 --
text{{ a 10? 变量 a 等于10: 变量 a 不等于10}}/text算数运算
!--
{ a: 1, b: 2, c: 3 }
--view {{a b}} {{c}} d /view!-- 输出 3 3 d --类似于算数运算还支持字符串的拼接如代码2-11所示。
字符串的拼接
!--
{ name: world }
--view{{hello name}}/view!-- 输出 hello world --{{ }}中还可以直接放置数字、字符串或者是数组
常量
text{{[1,2,3]}}/text!-- 输出 1,2,3 --text{{hello world}}/text!-- 输出 hello world --条件逻辑
WXML 中使用 wx:if“{{condition}}” 来判断是否需要渲染该代码块
view wx:if{{condition}} True /view使用 wx:elif 和 wx:else 来添加一个 else 块
view wx:if{{length 5}} 1 /view
view wx:elif{{length 2}} 2 /view
view wx:else 3 /view因为 wx:if 是一个控制属性需要将它添加到一个标签上。如果要一次性判断多个组件标签可以使用一个 block/ 标签将多个组件包装起来并在上边使用 wx:if 控制属性。
block wx:if{{true}}view view1 /viewview view2 /view
/block列表渲染
在组件上使用 wx:for 控制属性绑定一个数组即可使用数组中各项的数据重复渲染该组件。默认数组的当前项的下标变量名默认为 index数组当前项的变量名默认为 item
列表渲染示例
!-- array 是一个数组 --
view wx:for{{array}}{{index}}: {{item.message}}
/view!-- 对应的脚本文件
Page({data: {array: [{message: foo,}, {message: bar}]}
})
--使用 wx:for-item 指定数组当前元素的变量名使用 wx:for-index 指定数组当前下标的变量名
view wx:for{{array}} wx:for-indexidx wx:for-itemitemName{{idx}}: {{itemName.message}}
/view类似 block wx:if 也可以将 wx:for 用在 block/ 标签上以渲染一个包含多节点的结构块。例如
block wx:for{{[1, 2, 3]}}view {{index}}: /viewview {{item}} /view
/block如果列表中项目的位置会动态改变或者有新的项目添加到列表中并且希望列表中的项目保持自己的特征和状态如 input/ 中的输入内容 switch/ 的选中状态需要使用 wx:key 来指定列表中项目的唯一的标识符。
wx:key 的值以两种形式提供
字符串代表在 for 循环的 array 中 item 的某个 property该 property 的值需要是列表中唯一的字符串或数字且不能动态改变。保留关键字 this 代表在 for 循环中的 item 本身这种表示需要 item 本身是一个唯一的字符串或者数字如
当数据改变触发渲染层重新渲染的时候会校正带有 key 的组件框架会确保他们被重新排序而不是重新创建以确保使组件保持自身的状态并且提高列表渲染时的效率。
使用 wx:key 示例WXML
switch wx:for{{objectArray}} wx:keyunique {{item.id}} /switch
button bindtapswitch Switch /button
button bindtapaddToFront Add to the front /buttonswitch wx:for{{numberArray}} wx:key*this {{item}} /switch
button bindtapaddNumberToFront Add Number to the front /button使用 wx:key 示例JavaScript
Page({data: {objectArray: [{id: 5, unique: unique_5},{id: 4, unique: unique_4},{id: 3, unique: unique_3},{id: 2, unique: unique_2},{id: 1, unique: unique_1},{id: 0, unique: unique_0},],numberArray: [1, 2, 3, 4]},switch: function(e) {const length this.data.objectArray.lengthfor (let i 0; i length; i) {const x Math.floor(Math.random() * length)const y Math.floor(Math.random() * length)const temp this.data.objectArray[x]this.data.objectArray[x] this.data.objectArray[y]this.data.objectArray[y] temp}this.setData({objectArray: this.data.objectArray})},addToFront: function(e) {const length this.data.objectArray.lengththis.data.objectArray [{id: length, unique: unique_ length}].concat(this.data.objectArray)this.setData({objectArray: this.data.objectArray})},addNumberToFront: function(e){this.data.numberArray [ this.data.numberArray.length 1 ].concat(this.data.numberArray)this.setData({numberArray: this.data.numberArray})}
})模板
WXML提供模板template可以在模板中定义代码片段然后在不同的地方调用。使用 name 属性作为模板的名字。然后在 template/ 内定义代码片段如
定义模板
template namemsgItemviewtext {{index}}: {{msg}} /texttext Time: {{time}} /text/view
/template使用 is 属性声明需要的使用的模板然后将模板所需要的 data 传入。
模板使用示例
!--
item: {index: 0,msg: this is a template,time: 2016-06-18
}
--template namemsgItemviewtext {{index}}: {{msg}} /texttext Time: {{time}} /text/view
/templatetemplate ismsgItem data{{...item}}/!-- 输出
0: this is a template Time: 2016-06-18
--is可以动态决定具体需要渲染哪个模板。
动态使用模板
template nameoddview odd /view
/templatetemplate nameevenview even /view
/templateblock wx:for{{[1, 2, 3, 4, 5]}}template is{{item % 2 0 ? even : odd}}/
/block!-- 输出
odd
even
odd
even
odd
--引用
WXML 提供两种文件引用方式import和include。
import 可以在该文件中使用目标文件定义的 template如
在 item.wxml 中定义了一个叫 item的 template
!-- item.wxml --
template nameitemtext{{text}}/text
/template在 index.wxml 中引用了 item.wxml就可以使用 item模板
import srcitem.wxml/template isitem data{{text: forbar}}/需要注意的是 import 有作用域的概念即只会 import 目标文件中定义的 template而不会 import 目标文件中 import 的 template简言之就是 import 不具有递归的特性。
例如C 引用 BB 引用A在C中可以使用B定义的 template在B中可以使用A定义的 template 但是C不能使用A定义的template.
模板 A
!-- A.wxml --
template nameAtext A template /text
/template模板 B
!-- B.wxml --
import srca.wxml/template nameBtext B template /text
/template模板 C
!-- C.wxml --
import srcb.wxml/template isA/ !-- 这里将会触发一个警告因为 b 中并没有定义模板 A --template isB/include 可以将目标文件中除了 template/ wxs/ 外的整个代码引入相当于是拷贝到 include 位置。
index.wxml
!-- index.wxml --
include srcheader.wxml/view body /viewinclude srcfooter.wxml/header.wxml
!-- header.wxml --
view header /viewfooter.wxml
!-- footer.wxml --
view footer /view共同属性
所有wxml 标签都支持的属性称之为共同属性如表2-1所示。
共同属性
属性名类型描述注解idString组件的唯一标识整个页面唯一classString组件的样式类在对应的 WXSS 中定义的样式类styleString组件的内联样式可以动态设置的内联样式hiddenBoolean组件是否显示所有组件默认显示data-*Any自定义属性组件上触发的事件时会发送给事件处理函数bind*/catch*EventHandler组件的事件
1.4.3 WXSS 样式
WXSSWeiXin Style Sheets是一套用于小程序的样式语言用于描述WXML的组件样式也就是视觉上的效果。
WXSS与Web开发中的CSS类似。为了更适合小程序开发WXSS对CSS做了一些补充以及修改。WXSS 具有 CSS 大部分的特性小程序在 WXSS 也做了一些扩充和修改。
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-CUad84qt-1677491373233)(C:\Users\Administrator\AppData\Local\Temp\1677414122175.png)]
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-Yegl56EG-1677491373236)(C:\Users\Administrator\AppData\Local\Temp\1677414145584.png)]
项目公共样式根目录中的app.wxss为项目公共样式它会被注入到小程序的每个页面。页面样式与app.json注册过的页面同名且位置同级的WXSS文件。 app.json注册了pages/rpx/index页面那pages/rpx/index.wxss为页面pages/rpx/index.wxml的样式。
其它样式其它样式可以被项目公共样式和页面样式引用。
在小程序开发中开发者不需要像Web开发那样去优化样式文件的请求数量只需要考虑代码的组织即可。
新增了尺寸单位。在写 CSS 样式时开发者需要考虑到手机设备的屏幕会有不同的宽度和设备像素比采用一些技巧来换算一些像素单位。WXSS 在底层支持新的尺寸单位 rpx 开发者可以免去换算的烦恼只要交给小程序底层来换算即可由于换算采用的浮点数运算所以运算结果会和预期结果有一点点偏差。提供了全局的样式和局部样式。和前边 app.json, page.json 的概念相同你可以写一个 app.wxss 作为全局样式会作用于当前小程序的所有页面局部页面样式 page.wxss 仅对当前页面生效。在CSS中开发者可以这样引用另一个样式文件import url(./test_0.css)此外 WXSS 仅支持部分 CSS 选择器
WXSS内联样式与Web开发一致:
!--index.wxml--!--内联样式--
view stylecolor: red; font-size: 48rpx/view小程序支持动态更新内联样式
!--index.wxml--!--可动态变化的内联样式--
!--
{eleColor: red,eleFontsize: 48rpx
}
--
view stylecolor: {{eleColor}}; font-size: {{eleFontsize}}/view1.4.4 JS 逻辑交互
一个服务仅仅只有界面展示是不够的还需要和用户做交互响应用户的点击、获取用户的位置等等。在小程序里边我们就通过编写 JS 脚本文件来处理用户的操作。
模块化
浏览器中所有 JavaScript 是在运行在同一个作用域下的定义的参数或者方法可以被后续加载的脚本访问或者改写。同浏览器不同小程序中可以将任何一个JavaScript 文件作为一个模块通过module.exports 或者 exports 对外暴露接口。
请看是一个简单模块示例B.js 引用模块A并使用A暴露的multiplyBy2方法完成一个变量乘以 2 的操作。
模块示例
// moduleA.js
module.exports function( value ){return value * 2;
}引用模块A
// B.js// 在B.js中引用模块A
var multiplyBy2 require(./moduleA)
var result multiplyBy2(4)在需要使用这些模块的文件中使用 require(path) 将公共代码引入
var common require(common.js)
Page({helloMINA: function() {common.sayHello(MINA)},goodbyeMINA: function() {common.sayGoodbye(MINA)}
})1.5 小程序宿主环境
我们称微信客户端给小程序所提供的环境为宿主环境。小程序借助宿主环境提供的能力可以完成许多普通网页无法完成的功能。
1.5.1 渲染层和逻辑层
首先我们来简单了解下小程序的运行环境。小程序的运行环境分成渲染层和逻辑层其中 WXML 模板和 WXSS 样式工作在渲染层JS 脚本工作在逻辑层。
小程序的渲染层和逻辑层分别由2个线程管理渲染层的界面使用了WebView 进行渲染逻辑层采用 JsCore 线程运行 JS 脚本。一个小程序存在多个界面所以渲染层存在多个 WebView 线程这两个线程的通信会经由微信客户端下文中也会采用 Native 来代指微信客户端做中转逻辑层发送网络请求也经由 Native 转发小程序的通信模型下图所示。
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-uVmAbRHX-1677491373238)(C:\Users\Administrator\AppData\Local\Temp\1677409947621.png)]
1.5.2 程序与页面
微信客户端在打开小程序之前会把整个小程序的代码包下载到本地。
紧接着通过 app.json 的 pages 字段就可以知道你当前小程序的所有页面路径:
{pages:[pages/index/index,pages/logs/logs]
}这个配置说明在 QuickStart 项目定义了两个页面分别位于 pages/index/index 和 pages/logs/logs。而写在 pages 字段的第一个页面就是这个小程序的首页打开小程序看到的第一个页面。
于是微信客户端就把首页的代码装载进来通过小程序底层的一些机制就可以渲染出这个首页。
小程序启动之后在 app.js 定义的 App 实例的 onLaunch 回调会被执行:
App({onLaunch: function () {// 小程序启动之后 触发}
})整个小程序只有一个 App 实例是全部页面共享的。
接下来我们简单看看小程序的一个页面是怎么写的。
你可以观察到 pages/logs/logs 下其实是包括了4种文件的微信客户端会先根据 logs.json 配置生成一个界面顶部的颜色和文字你都可以在这个 json 文件里边定义好。紧接着客户端就会装载这个页面的 WXML 结构和 WXSS 样式。最后客户端会装载 logs.js你可以看到 logs.js 的大体内容就是:
Page({data: { // 参与页面渲染的数据logs: []},onLoad: function () {// 页面渲染后 执行}
})Page 是一个页面构造器这个构造器就生成了一个页面。在生成页面的时候小程序框架会把 data 数据和 index.wxml 一起渲染出最终的结构于是就得到了你看到的小程序的样子。
在渲染完界面之后页面实例就会收到一个 onLoad 的回调你可以在这个回调处理你的逻辑。
1.5.3 组件
小程序提供了丰富的基础组件给开发者开发者可以像搭积木一样组合各种组件拼合成自己的小程序。
就像 HTML 的 div, p 等标签一样在小程序里边你只需要在 WXML 写上对应的组件标签名字就可以把该组件显示在界面上例如你需要在界面上显示地图你只需要这样写即可
map/map使用组件的时候还可以通过属性传递值给组件让组件可以以不同的状态去展现例如我们希望地图一开始的中心的经纬度是广州那么你需要声明地图的 longitude中心经度 和 latitude中心纬度两个属性:
map longitude广州经度 latitude广州纬度/map组件的内部行为也会通过事件的形式让开发者可以感知例如用户点击了地图上的某个标记你可以在 js 编写 markertap 函数来处理
map bindmarkertapmarkertap longitude广州经度 latitude广州纬度/map当然你也可以通过 style 或者 class 来控制组件的外层样式以便适应你的界面宽度高度等等。
1.5.4 API
为了让开发者可以很方便的调起微信提供的能力例如获取用户信息、微信支付等等小程序提供了很多 API 给开发者去使用。
要获取用户的地理位置时只需要
wx.getLocation({type: wgs84,success: (res) {var latitude res.latitude // 纬度var longitude res.longitude // 经度}
})调用微信扫一扫能力只需要
wx.scanCode({success: (res) {console.log(res)}
})需要注意的是多数 API 的回调都是异步你需要处理好代码逻辑的异步问题
二、Vue简介
2.1 Vue的定义
Vue是一种前端JavaScript框架它是一种轻量级的MVVM框架可以用于构建Web界面。
2.2 Vue的特点 易于上手Vue具有简单易学的特点可以快速上手。 灵活性高Vue的组件化设计可以方便地组合和重用组件。 性能优秀Vue采用虚拟DOM技术可以提高渲染效率减少页面渲染时间。 支持插件化Vue可以轻松地集成第三方插件扩展其功能。
2.3 Vue的使用
Vue的使用主要包括以下几个方面
数据绑定Vue通过数据绑定实现视图与数据的同步更新。组件化Vue将应用程序划分为一个个组件便于开发和维护。路由管理Vue提供了Vue Router插件可以轻松管理应用程序的路由。状态管理Vue提供了Vuex插件可以方便地管理应用程序的状态。
2.4 MVVM软件架构模式
MVVM是一种软件架构模式它由三个核心部分组成Model模型、View视图和ViewModel视图模型。这种模式通常用于开发用户界面它的目的是将应用程序的逻辑和用户界面分离开来从而提高代码的可维护性和可扩展性。
下面是MVVM架构中各个部分的详细说明
Model
Model是应用程序中数据的存储和管理部分。它通常包括数据结构、数据库、网络通信等。在MVVM中Model用于表示应用程序的业务逻辑和数据。
View
View是应用程序中用户界面的展示部分。它通常包括UI控件、视图元素、动画等。在MVVM中View是与用户交互的部分它负责将ViewModel中的数据呈现给用户并接受用户输入的操作。
ViewModel
ViewModel是连接View和Model之间的桥梁。它主要包括数据绑定、命令绑定、事件处理等功能。在MVVM中ViewModel用于将Model中的数据映射到View中并且在View中的操作反映到Model中。
MVVM架构中最重要的一部分是数据绑定。数据绑定是指将View中的控件与ViewModel中的属性绑定在一起当ViewModel中的属性值发生变化时View中的控件会自动更新。同样地当用户在View中进行操作时ViewModel中的属性也会相应地进行更新。
MVVM架构的优点包括
提高代码的可维护性和可扩展性MVVM将应用程序的逻辑和用户界面分离开来从而使得代码更易于维护和扩展。提高开发效率MVVM中的数据绑定和命令绑定可以自动完成减少了重复代码的编写提高了开发效率。提高测试效率由于MVVM中的View和ViewModel之间的依赖关系松散因此可以更方便地对ViewModel进行单元测试。
总的来说MVVM是一种强大的软件架构模式它在现代Web开发中被广泛应用例如Vue.js和AngularJS等框架都采用了MVVM架构。
当我们使用MVVM框架时通常会采用以下设计模式
数据绑定
MVVM的核心概念之一是数据绑定。数据绑定是指将视图(View)和模型(Model)之间的数据同步更新的机制。通常采用单向绑定和双向绑定。
单向绑定视图只能读取模型的数据无法更改。当模型的数据发生变化时视图会自动更新。双向绑定视图可以读取并更改模型的数据当视图中的数据发生变化时模型的数据也会随之更新。
命令绑定
命令绑定是MVVM框架中的另一个重要概念。命令绑定是指将视图中的事件和ViewModel中的命令绑定在一起从而实现对视图事件的响应。
在传统的MVC框架中通常会将事件的处理代码写在Controller中而在MVVM框架中我们将这些处理代码封装在ViewModel中通过命令绑定来实现事件处理。
ViewModel
在MVVM框架中ViewModel负责将Model中的数据转换为View中的数据。ViewModel通常包括以下几个部分
数据模型(Model)ViewModel通过数据模型(Model)来获取和管理数据。数据绑定(Data Binding)ViewModel通过数据绑定(Data Binding)将数据模型(Model)中的数据同步到View中。命令绑定(Command Binding)ViewModel通过命令绑定(Command Binding)将视图(View)中的事件和命令(Command)绑定在一起。
View
在MVVM框架中View是用户界面的展示部分通常由HTML、CSS和JavaScript等技术实现。View负责将ViewModel中的数据呈现给用户并接受用户的输入操作。同时View也需要将用户的操作传递给ViewModel进行处理。
总的来说MVVM框架通过数据绑定和命令绑定实现了视图(View)和视图模型(ViewModel)之间的解耦将应用程序的逻辑和用户界面分离开来从而提高了代码的可维护性和可扩展性。
当我们在Vue中使用MVVM框架时我们通常会遵循以下步骤
在Vue中创建一个Vue实例指定其所使用的HTML元素和初始数据。在Vue实例中定义一个名为methods的对象用于定义视图中的事件处理函数。在Vue实例中定义一个名为computed的对象用于定义视图中的计算属性。在HTML中使用Vue指令将视图与数据模型绑定在一起。
下面是一个使用Vue实现的简单计数器应用程序的示例
htmlCopy code
!DOCTYPE html
html
head
titleVue MVVM Example/title
script srchttps://cdn.jsdelivr.net/npm/vue/script
/head
body
div idapp h1{{ count }}/h1
button v-on:clickincrement/button
button v-on:clickdecrement-/button
/div
script
var app new Vue({
el: #app,
data: { count: 0 },
methods: {increment: function(){ this.count 1; }, decrement: function() { this.count - 1; } },
computed: {}
});
/script
/body /html 在这个示例中我们使用Vue创建了一个Vue实例将其绑定到id为app的HTML元素上。在Vue实例中我们定义了一个名为count的数据模型以及两个名为increment和decrement的事件处理函数。我们还通过Vue指令将视图中的两个按钮与对应的事件处理函数绑定在一起。
当用户点击“按钮时Vue实例中的increment方法将被调用它会将count加1并通过数据绑定机制自动将更新后的值同步到视图中。当用户点击”-按钮时同样会调用decrement方法将count减1。
这个示例演示了MVVM框架中数据绑定和命令绑定的实现方式它将数据模型和视图逻辑分离开来提高了代码的可维护性和可扩展性。
三、uniapp
3.1 什么是uni-app
uni-app是一个使用 Vue.js 开发所有前端应用的框架开发者编写一套代码可发布到iOS、Android、Web响应式、以及各种小程序微信/支付宝/百度/头条/飞书/QQ/快手/钉钉/淘宝、快应用等多个平台。
一套代码编到14个平台 :
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-dvMG4iNK-1677491373241)(C:\Users\Administrator\AppData\Local\Temp\1677479569671.png)]
3.2 快速上手
开始之前开发者需先下载安装如下工具
HBuilderX官方IDE下载地址
3.2.1 创建uni-app
在点击工具栏里的文件 - 新建 - 项目快捷键CtrlN
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-VTyMIRCm-1677491373243)(C:\Users\Administrator\AppData\Local\Temp\1677479883538.png)]
选择uni-app类型输入工程名选择模板点击创建即可成功创建。
uni-app自带的模板有 默认的空项目模板、Hello uni-app 官方组件和API示例还有一个重要模板是 uni ui项目模板日常开发推荐使用该模板已内置大量常用组件。
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-6HOge0Cz-1677491373252)(C:\Users\Administrator\AppData\Local\Temp\1677479914051.png)]
3.2.2 uni-app工程目录结构
一个uni-app工程默认包含如下目录及文件
┌─uniCloud 云空间目录阿里云为uniCloud-aliyun,腾讯云为uniCloud-tcb详见uniCloud
│─components 符合vue组件规范的uni-app组件目录
│ └─comp-a.vue 可复用的a组件
├─utssdk 存放uts文件
├─pages 业务页面文件存放的目录
│ ├─index
│ │ └─index.vue index页面
│ └─list
│ └─list.vue list页面
├─static 存放应用引用的本地静态资源如图片、视频等的目录注意静态资源只能存放于此
├─uni_modules 存放[uni_module](/uni_modules)。
├─platforms 存放各平台专用页面的目录详见
├─nativeplugins App原生语言插件 详见
├─nativeResources App端原生资源目录
│ └─android Android原生资源目录 详见
├─hybrid App端存放本地html文件的目录详见
├─wxcomponents 存放小程序组件的目录详见
├─unpackage 非工程代码一般存放运行或发行的编译结果
├─AndroidManifest.xml Android原生应用清单文件 详见
├─main.js Vue初始化入口文件
├─App.vue 应用配置用来配置App全局样式以及监听 应用生命周期
├─manifest.json 配置应用名称、appid、logo、版本等打包信息详见
├─pages.json 配置页面路由、导航条、选项卡等页面类信息详见
└─uni.scss 这里是uni-app内置的常用样式变量3.2.3 页面简介
uni-app项目中一个页面就是一个符合Vue SFC规范的.vue文件或.nvue文件。
.vue页面和.nvue页面均全平台支持差异在于当uni-app发行到App平台时.vue文件会使用webview进行渲染.nvue会使用原生进行渲染。
新建页面
uni-app中的页面通常会保存在工程根目录下的pages目录下。
每次新建页面均需在pages.json中配置pages列表未在pages.json - pages 中配置的页面uni-app会在编译阶段进行忽略。pages.json的完整配置参考全局文件。
通过HBuilderX开发 uni-app 项目时在 uni-app 项目上右键“新建页面”HBuilderX会自动在pages.json中完成页面注册开发更方便。
同时HBuilderX 还内置了常用的页面模板如图文列表、商品列表等选择这些模板可以大幅提升你的开发效率。
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-blFJTk8L-1677491373255)(C:\Users\Administrator\AppData\Local\Temp\1677481498150.png)]
删除页面
删除页面时需做两件工作
删除.vue文件或.nvue文件删除pages.json - pages列表项中的配置
应用首页
uni-app会将pages.json - pages配置项中的第一个页面作为当前工程的首页启动页。
页面生命周期
uni-app 支持如下页面生命周期函数
函数名说明平台差异说明最低版本onInit监听页面初始化其参数同 onLoad 参数为上个页面传递的数据参数类型为 Object用于页面传参触发时机早于 onLoad百度小程序3.1.0onLoad监听页面加载其参数为上个页面传递的数据参数类型为 Object用于页面传参参考示例onShow监听页面显示。页面每次出现在屏幕上都触发包括从下级页面点返回露出当前页面onReady监听页面初次渲染完成。注意如果渲染速度快会在页面进入动画完成前触发onHide监听页面隐藏onUnload监听页面卸载onResize监听窗口尺寸变化App、微信小程序、快手小程序onPullDownRefresh监听用户下拉动作一般用于下拉刷新参考示例onReachBottom页面滚动到底部的事件不是scroll-view滚到底常用于下拉下一页数据。具体见下方注意事项onTabItemTap点击 tab 时触发参数为Object具体见下方注意事项微信小程序、QQ小程序、支付宝小程序、百度小程序、H5、App、快手小程序、京东小程序onShareAppMessage用户点击右上角分享微信小程序、QQ小程序、支付宝小程序、字节小程序、飞书小程序、快手小程序、京东小程序onPageScroll监听页面滚动参数为Objectnvue暂不支持onNavigationBarButtonTap监听原生标题栏按钮点击事件参数为ObjectApp、H5onBackPress监听页面返回返回 event {from:backbutton、 navigateBack} backbutton 表示来源是左上角返回按钮或 android 返回键navigateBack表示来源是 uni.navigateBack 详细说明及使用onBackPress 详解。支付宝小程序只有真机能触发只能监听非navigateBack引起的返回不可阻止默认行为。app、H5、支付宝小程序onNavigationBarSearchInputChanged监听原生标题栏搜索输入框输入内容变化事件App、H51.6.0onNavigationBarSearchInputConfirmed监听原生标题栏搜索输入框搜索事件用户点击软键盘上的“搜索”按钮时触发。App、H51.6.0onNavigationBarSearchInputClicked监听原生标题栏搜索输入框点击事件pages.json 中的 searchInput 配置 disabled 为 true 时才会触发App、H51.6.0onShareTimeline监听用户点击右上角转发到朋友圈微信小程序2.8.1onAddToFavorites监听用户点击右上角收藏微信小程序、QQ小程序2.8.1
onReachBottom使用注意 可在pages.json里定义具体页面底部的触发距离onReachBottomDistance比如设为50那么滚动页面到距离底部50px时就会触发onReachBottom事件。
组件生命周期
uni-app 组件支持的生命周期与vue标准组件的生命周期相同。这里没有页面级的onLoad等生命周期
函数名说明平台差异说明最低版本beforeCreate在实例初始化之前被调用。详见created在实例创建完成后被立即调用。详见beforeMount在挂载开始之前被调用。详见mounted挂载到实例上去之后调用。详见 注意此处并不能确定子组件被全部挂载如果需要子组件完全挂载之后在执行操作可以使用$nextTickVue官方文档beforeUpdate数据更新时调用发生在虚拟 DOM 打补丁之前。详见仅H5平台支持updated由于数据更改导致的虚拟 DOM 重新渲染和打补丁在这之后会调用该钩子。详见仅H5平台支持beforeDestroy实例销毁之前调用。在这一步实例仍然完全可用。详见destroyedVue 实例销毁后调用。调用后Vue 实例指示的所有东西都会解绑定所有的事件监听器会被移除所有的子实例也会被销毁。详见
路由
uni-app页面路由为框架统一管理开发者需要在pages.json里配置每个路由页面的路径及页面样式。类似小程序在 app.json 中配置页面路由一样。所以 uni-app 的路由用法与 Vue Router 不同如仍希望采用 Vue Router 方式管理路由可在插件市场搜索 Vue-Router。
路由跳转
uni-app 有两种页面路由跳转方式使用navigator组件跳转、调用API跳转。
页面栈
框架以栈的形式管理当前所有页面 当发生路由切换的时候页面栈的表现如下
路由方式页面栈表现触发时机初始化新页面入栈uni-app 打开的第一个页面打开新页面新页面入栈调用 API uni.navigateTo 、使用组件 页面重定向当前页面出栈新页面入栈调用 API uni.redirectTo 、使用组件 页面返回页面不断出栈直到目标返回页调用 API uni.navigateBack 、使用组件 、用户按左上角返回按钮、安卓用户点击物理back按键Tab 切换页面全部出栈只留下新的 Tab 页面调用 API uni.switchTab 、使用组件 、用户切换 Tab重加载页面全部出栈只留下新的页面调用 API uni.reLaunch 、使用组件
相互引用
引用组件
传统vue项目开发引用组件需要导入 - 注册 - 使用三个步骤如下
templateview!-- 3.使用组件 --uni-rate text1/uni-rate/view
/template
script// 1. 导入组件import uniRate from /components/uni-rate/uni-rate.vue;export default {components: { uniRate } // 2. 注册组件}
/scriptVue 3.x增加了script setup特性将三步优化为两步无需注册步骤更为简洁
templateview!-- 2.使用组件 --uni-rate text1/uni-rate/view
/template
script setup// 1. 导入组件import uniRate from /components/uni-rate/uni-rate.vue;
/scriptuni-app的easycom机制将组件引用进一步优化开发者只管使用无需考虑导入和注册更为高效
templateview!-- 1.使用组件 --uni-rate text1/uni-rate/view
/template
script
/script在 uni-app 项目中页面引用组件和组件引用组件的方式都是一样的可以理解为页面是一种特殊的组件均支持通过 easycom 方式直接引用。
js 文件引入 js文件或script标签内包括 renderjs 等引入js文件时可以使用相对路径和绝对路径形式如下 // 绝对路径指向项目根目录在cli项目中指向src目录
import add from /common/add.js;
// 相对路径
import add from ../../common/add.js;注意
js 文件不支持使用/开头的方式引入
NPM支持
uni-app支持使用npm安装第三方包。
此文档要求开发者们对npm有一定的了解因此不会再去介绍npm的基本功能。如若之前未接触过npm请翻阅NPM官方文档进行学习。
初始化npm工程
若项目之前未使用npm管理依赖项目根目录下无package.json文件先在项目根目录执行命令初始化npm工程
npm init -ycli项目默认已经有package.json了。HBuilderX创建的项目默认没有需要通过初始化命令来创建。
安装依赖
在项目根目录执行命令安装npm包
npm install packageName --save使用
安装完即可使用npm包js中引入npm包
import package from packageName
const package require(packageName)引入css
使用import语句可以导入外联样式表import后跟需要导入的外联样式表的相对路径用;表示语句结束。
示例代码
styleimport ../../common/uni.css;.uni-card {box-shadow: none;}
/stylecss 引入静态资源 css文件或style标签内引入css文件时scss、less 文件同理可以使用相对路径或绝对路径HBuilderX 2.6.6 /* 绝对路径 */
import url(/common/uni.css);
import url(/common/uni.css);
/* 相对路径 */
import url(../../common/uni.css);复制代码
注意
自HBuilderX 2.6.6起支持绝对路径引入静态资源旧版本不支持此方式 css文件或style标签内引用的图片路径可以使用相对路径也可以使用绝对路径需要注意的是有些小程序端 css 文件不允许引用本地文件请看注意事项。 /* 绝对路径 */
background-image: url(/static/logo.png);
background-image: url(/static/logo.png);
/* 相对路径 */
background-image: url(../../static/logo.png);3.2.4 运行uni-app
浏览器运行进入hello-uniapp项目点击工具栏的运行 - 运行到浏览器 - 选择浏览器即可体验 uni-app 的 web 版。
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-7LHZBReq-1677491373257)(C:\Users\Administrator\AppData\Local\Temp\1677480041248.png)]
运行App到手机或模拟器使用电压足够的usb端口连接手机设置中开启USB调试手机上允许电脑设备调试手机进入hello-uniapp项目点击工具栏的运行 - 运行App到手机或模拟器即可在该设备里面体验uni-app。
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-pUlFurDL-1677491373259)(C:\Users\Administrator\AppData\Local\Temp\1677480055229.png)]
如需运行在苹果手机真机上注意需使用自定义基座 .
在微信开发者工具里运行进入hello-uniapp项目点击工具栏的运行 - 运行到小程序模拟器 - 微信开发者工具即可在微信开发者工具里面体验uni-app。
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-SUNwvz7p-1677491373337)(C:\Users\Administrator\AppData\Local\Temp\1677480075752.png)]
注意如果是第一次使用需要先配置小程序ide的相关路径才能运行成功。如下图需在输入框输入微信开发者工具的安装路径。
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-ONb88xYq-1677491373340)(C:\Users\Administrator\AppData\Local\Temp\1677480089899.png)]
3.2.5 发布uni-app
打包为原生App
在HBuilderX工具栏点击发行选择原生app-云端打包如下图
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-56r3umCj-1677491373342)(C:\Users\Administrator\AppData\Local\Temp\1677480192068.png)]
出现如下界面点击打包即可
云端打包支持安心打包保护用户隐私不会上传代码和证书通过差量包制作方式实现安心打包。
App打包时注意如果涉及三方sdk需进行申请并在manifest.json里配置否则相关功能无法使用。
iOS App打包需要向Apple申请证书。
发布为Web网站 在 manifest.json 的可视化界面进行如下配置发行在网站根目录可不配置应用基本路径此时发行网站路径是 www.xxx.com/h5 [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-zb9ssag7-1677491373344)(C:\Users\Administrator\AppData\Local\Temp\1677480428998.png)] 在HBuilderX工具栏点击发行选择网站-H5手机版如下图点击即可生成 H5 的相关资源文件保存于 unpackage 目录 [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-GRKsksiA-1677491373347)(C:\Users\Administrator\AppData\Local\Temp\1677480576864.png)] [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-bkAilRXM-1677491373349)(C:\Users\Administrator\AppData\Local\Temp\1677480599102.png)] 打包后推荐使用前端网页托管服务一键上传自带CDN加速无需购买虚拟机无需安装nginx等
发布为微信小程序
申请微信小程序AppID参考微信教程。在HBuilderX中顶部菜单依次点击 “发行” “小程序-微信”输入小程序名称和appid点击发行即可
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-01m8R5uW-1677491373351)(C:\Users\Administrator\AppData\Local\Temp\1677480773411.png)]
如果手动发行则点击发行按钮后会在项目的目录 unpackage/dist/build/mp-weixin 生成微信小程序项目代码。在微信小程序开发者工具中导入生成的微信小程序项目测试项目代码运行正常后点击“上传”按钮之后按照 “提交审核” “发布” 小程序标准流程逐步操作即可详细查看微信官方教程。
如果在发行界面勾选了自动上传微信平台则无需再打开微信工具手动操作将直接上传到微信服务器提交审核。
四、 unicloud
uniCloud 是 DCloud 联合阿里云、腾讯云为开发者提供的基于 serverless 模式和 js 编程的云开发平台。
uniCloud 的 web控制台地址https://unicloud.dcloud.net.cn
4.1uniCloud是什么和不是什么
uniCloud是DCloud在阿里云和腾讯云的serverless服务上封装而成的。
它包含IaaS层由阿里云和腾讯云提供硬件和网络和PaaS层由DCloud提供开发环境。
开发者可以自主选择uniCloud的硬件和网络资源的供应商在阿里云版和腾讯云版之间切换。
开户和付费虽然通过DCloud渠道但实际上开发者自动在云厂商处建立了账户和充值了余额。价格是云厂商的标准定价DCloud只获取云服务厂商的返佣。
开发时虽使用DCloud的工具但应用上线时手机端是直连阿里云或腾讯云的serverless不经由DCloud的服务器。
4.2 什么是serverless
serverless是目前很火的概念它是下一代云技术是真正的“云”。
传统的云服务让开发者免于购买实体服务器硬件改为购买虚拟机。但开发者仍然要自己装操作系统、web服务器、数据库自己处理热备自己新购服务器来应对高并发自己抗DDOS攻击…
这不是成熟的“云”
真正的云计算就像用水用电没有复杂的门槛即用即有、按需付费。
简单回顾下用电的历史。几十年前很多单位都有专门管电的工程师当单位的电力负荷不够时就需要找这个管电的工程师扩容发电机。
现在这个管电工程师的岗位已经淘汰了电已经变成随用随取、按需付费了。
传统云模式下开发商仍然需要一个管服务器的工程师当用户量激增或被攻击时甚至需要半夜把工程师叫醒来扩容。这当然不合理。
serverless的云真正的把计算、存储的能力进行了云化开发者只需要按量租用这些计算和存储能力再也不用关心扩容和攻击。
开发者不再有“服务器”的概念因为没有一台具体的机器。就像现在的你再也找不到自己的发电机一样。
当用户量激增时开发者什么都不用做系统自动承载更高并发。开发者只需要按照对资源的消耗付费即可。
同理如果没有用户使用即没有资源消耗则根本无需为云资源付费。
开发者写好云端业务代码即js编写的云函数通过HBuilderX部署到uniCloud上即可。
云端庞大的serverless资源池有无数个node进程待命。当手机用户发起请求时serverless系统会调配闲置的资源来运行开发者相应的云函数。
serverless让一个不懂服务器运维的开发者可以只处理自己的业务再不用关心热备、负载、增容、DDOS等事情。serverless让一个学生也可以享受世界最顶级的IT基础设置。
serverless在国外兴起但国内的发展速度已经超过了国外。微信、支付宝、百度、字节跳动、快应用联盟都上线了自己的serverless云开发。
目前国内已经有超过60万开发者在使用serverless云开发包括腾讯、阿里、DCloud的很多自有业务都在使用。
就像uni-app可跨端一样uniCloud可跨云。基于uniCloud无需担心使用云开发被绑定到专用的小程序平台。uni-app uniCloud 是跨端跨云的开发方案
4.3 基本概念
4.3.1服务空间
一个服务空间对应一整套独立的云开发资源包括数据库、存储空间、云函数等资源。服务空间之间彼此隔离。
每个服务空间都有一个全局唯一的space ID。
通过 HBuilderX 中管理服务空间包括新建服务空间和关联服务空间
在 uniCloud 目录右键菜单中创建服务空间 创建服务空间后在同样的 uniCloud 目录右键菜单中关联该服务空间。只有项目关联好服务空间后才能上传云函数、操作服务空间下的数据库、存储等资源。
通过uniCloud的web控制台https://unicloud.dcloud.net.cn 管理服务空间。
web控制台可以新建、删除服务空间管理线上的服务空间资源。
新建服务空间注意
第一次创建腾讯云服务空间时会为用户创建腾讯云账号并跳转到腾讯云实名界面等待实名认证审核之后可以开通服务空间。若腾讯云实名认证提示身份证下已创建过多账户则需要在腾讯云官网注销不用的账户。详见创建服务空间可能需要几十秒的时间可以在web控制台查看是否创建完成。
多人协作 2022年7月18日前服务空间的多人协作是在 dev.dcloud.net.cn 的 app 协作中设置。在2022年7月18日后改为在 unicloud.dcloud.net.cn 设置。 一个服务空间只有一个创建者但可以设置协作成员。
项目涉及多人开发时在uniCloud WEB控制台设置协作者选择服务空间-成员管理实现多人共同使用一个云服务空间。
协作者可以在HBuilderX和web控制台中操作被授权的服务空间除了删除服务空间其他功能均可正常操作。
授权步骤
登录uniCloud WEB控制台中选择要添加协作者的服务空间在服务空间详情页面左侧菜单点击成员管理输入协作者邮箱并点击搜索下方会出现搜索到的结果确认无误后点击添加成员进行添加 下方成员列表中可以查看以及移除已添加的协作者 注意
服务空间协作者和App的协作者是2套体系需要分别设置无关联关系。App协作者在 dev.dcloud.net.cn 设置。只有服务空间的创建者才可以添加成员协作者无此权限根据法律要求协作者账号需完成实名认证才可以正常添加
应用和服务空间的关系
每个uni-app应用都有一个appid每个服务空间都有一个spaceid。
服务空间和手机端项目是多对多绑定关系。同DCloud账号下一个应用可以关联到多个服务空间。一个服务空间也可以被多个项目访问。
多应用共用服务空间
随着用户使用uniCloud开发的项目越来越多 部分用户遇到了新的问题。
两个、多个项目想共用一个云服务空间比如一个系统有用户端项目、管理admin项目两个项目需要公共服务空间。还有司机端、乘客端、用户端、骑手端…很多类似的问题。
如果每个项目目录下都存在多个重复的云函数文件。 每个项目都要做 同步云函数列表 下载云函数等操作。 繁琐而且很容易冲突。
针对上面出现的问题 提供了一云多项目的解决方案。
一云多端
绑定其它项目的服务空间
选中项目下的uniCloud-aliyun|tcb目录 右键菜单点击 【关联云服务空间或项目… 】 可以关联云服务空间、绑定其它项目的服务空间 以阿里云举例 绑定其它项目的服务空间 指的是关联其他项目的当前使用的阿里云服务空间。 阿里云无法关联到腾讯云 腾讯云也无法关联到阿里云 但是项目可以关联使用时会报错。如果项目已关联其他项目 选择云服务空间 此时关联关系会断开。
4.3.2云数据库
uniCloud 提供了 2 个 nosql 数据库。 JSON文档型云数据库 uniCloud阿里云版的云数据库就是 MongoDB 的 serverless版uniCloud腾讯云版的云数据库是兼容 MongoDB 的自研数据库。 数据库中的每条记录都是一个 JSON 格式的对象。 一个数据库可以有多个集合相当于关系型数据中的表集合可看做一个 JSON 数组数组中的每个对象就是一条记录记录的格式是 JSON 对象。 这对于js工程师而言非常容易理解掌握。 MongoDB的传统操作方法还是比较复杂uniCloud提供了更多简单操作数据库的方案包括类似 SQL 的 JQL 语法、clientDB等技术。 redis 数据库 redis 是一种可以运行在内存中的键值对数据库它的能力没有MongoDB强大但由于可运行在内存中它的性能远超常规数据库。 redis 也使用 json 方式 key/value 键值对存储数据。更多文档参考
如果开发者需要其他数据库比如 mysql、ElasticSearch、数据湖这些数据库没有在uniCloud的服务空间内置云函数中通过 nodejs 的 api 可以访问这些远程数据库。
4.3.3云函数/云对象
云函数即在云端服务器端运行的函数。
从 HBuilderX 3.4起新增了云函数的扩展版云对象。
开发者无需购买、搭建服务器只需编写代码并部署到云端即可在客户端App/Web/小程序等调用同时云函数之间也可互相调用。
一个云函数的写法与一个在本地定义的 JavaScript 方法无异代码运行在云端 Node.js 中。当云函数被客户端调用时定义的代码会被放在 Node.js 运行环境中执行。
开发者可以如在 Node.js 环境中使用 JavaScript 一样在云函数中进行网络请求等操作也可以使用 node_modules。
但 DCloud提供了 uniCloud对象 内置在云函数/云对象中开发者使用更多的是 uniCloud 的 api不了解 node 不影响开发。
HBuilderX 3.0起版本在uniCloud/cloudfunctions目录右键创建云函数如下 在HBuilderX 3.4起上述界面更新为 新建云函数/云对象。
云对象本质是对云函数的一种封装可以对象化的方式使用云服务。
HBuilderX 3.0之前版本项目下没有uniCloud目录直接在cloudfunctions目录上右键、新建云函数
云函数修改后可以本地运行。只有上传到云端方可在云端生效。
4.4 快速上手
4.4.1 创建uniCloud项目
HBuilderX中新建项目选择uni-app项目并勾选启用uniCloud在右侧选择服务供应商腾讯云或阿里云
项目名称随意比如 firstunicloud
4.4.2 关联服务空间
一个开发者可以拥有多个服务空间每个服务空间都是一个独立的serverless云环境不同服务空间之间的云函数、数据库、存储都是隔离的。
对项目根目录uniCloud点右键选择关联云服务空间绑定之前创建的服务空间或者新建一个服务空间。
4.4.3 创建云函数/云对象
uniCloud项目创建并绑定服务空间后开发者可以创建云函数云对象是云函数的一种云函数可泛指普通云函数和云对象。
在uniCloud/cloudfunctions目录右键创建云函数/云对象 创建云函数后生成一个目录该目录下自动生成index.js是该云函数的入口文件不可改名。创建云对象后生成一个目录该目录下自动生成index.obj.js是该云对象的入口文件不可改名。
如果该云函数/云对象还需要引入其他js可在index.js入口文件中引用。
初学者建议从云对象学起比云函数更加简单直观。
在本教程中我们创建一个云对象名为 helloco。
给云对象编写方法
打开index.obj.js我们为它添加一个 sum 方法逻辑就是接收传入a和b2个参数返回求和结果。
module.exports {sum(a, b) {// 此处省略a和b的有效性校验return a b}
}在前端调用云对象
在项目首页pages/index/index.vue 里添加一个按钮点击后执行异步方法sum。
js 中 import 这个 helloco 对象调用它的 sum 方法
templateview classcontentbutton clicktestco()请求云对象的方法/button/view
/templatescriptexport default {data() {return {}},methods: {async testco() { // 注意异步const helloco uniCloud.importObject(helloco) // 导入云对象try {const res await helloco.sum(1,2) //导入云对象后就可以直接调用该对象的sum方法了注意使用异步awaitconsole.log(res) // 结果是3} catch (e) {console.log(e)}}}}
/script运行
将项目运行到浏览器或其他平台点页面上的按钮控制台会打印结果3
HBuilderX自带一个云函数本地运行环境运行项目时也默认选择 连接本地云函数。可以在底部控制台中的前端控制台右上角进行切换。
可以对helloco云对象点右键上传到uniCloud服务空间然后在前端控制台右上角切换为 连接云端云函数那么此时客户端连接的就是真正的现网uniCloud服务器了。
五、 项目案例
、新建云函数
云函数修改后可以本地运行。只有上传到云端方可在云端生效。
4.4 快速上手
4.4.1 创建uniCloud项目
HBuilderX中新建项目选择uni-app项目并勾选启用uniCloud在右侧选择服务供应商腾讯云或阿里云
项目名称随意比如 firstunicloud
4.4.2 关联服务空间
一个开发者可以拥有多个服务空间每个服务空间都是一个独立的serverless云环境不同服务空间之间的云函数、数据库、存储都是隔离的。
对项目根目录uniCloud点右键选择关联云服务空间绑定之前创建的服务空间或者新建一个服务空间。
4.4.3 创建云函数/云对象
uniCloud项目创建并绑定服务空间后开发者可以创建云函数云对象是云函数的一种云函数可泛指普通云函数和云对象。
在uniCloud/cloudfunctions目录右键创建云函数/云对象
[外链图片转存中…(img-X1PYnlC3-1677491373368)]
创建云函数后生成一个目录该目录下自动生成index.js是该云函数的入口文件不可改名。创建云对象后生成一个目录该目录下自动生成index.obj.js是该云对象的入口文件不可改名。
如果该云函数/云对象还需要引入其他js可在index.js入口文件中引用。
初学者建议从云对象学起比云函数更加简单直观。
在本教程中我们创建一个云对象名为 helloco。
给云对象编写方法
打开index.obj.js我们为它添加一个 sum 方法逻辑就是接收传入a和b2个参数返回求和结果。
module.exports {sum(a, b) {// 此处省略a和b的有效性校验return a b}
}在前端调用云对象
在项目首页pages/index/index.vue 里添加一个按钮点击后执行异步方法sum。
js 中 import 这个 helloco 对象调用它的 sum 方法
templateview classcontentbutton clicktestco()请求云对象的方法/button/view
/templatescriptexport default {data() {return {}},methods: {async testco() { // 注意异步const helloco uniCloud.importObject(helloco) // 导入云对象try {const res await helloco.sum(1,2) //导入云对象后就可以直接调用该对象的sum方法了注意使用异步awaitconsole.log(res) // 结果是3} catch (e) {console.log(e)}}}}
/script运行
将项目运行到浏览器或其他平台点页面上的按钮控制台会打印结果3
HBuilderX自带一个云函数本地运行环境运行项目时也默认选择 连接本地云函数。可以在底部控制台中的前端控制台右上角进行切换。
可以对helloco云对象点右键上传到uniCloud服务空间然后在前端控制台右上角切换为 连接云端云函数那么此时客户端连接的就是真正的现网uniCloud服务器了。
五、 项目案例
https://blog.csdn.net/weixin_43025151/article/details/129019497?spm1001.2014.3001.5501 文章转载自： http://www.morning.wdlyt.cn.gov.cn.wdlyt.cn http://www.morning.wqcz.cn.gov.cn.wqcz.cn http://www.morning.qrzqd.cn.gov.cn.qrzqd.cn http://www.morning.xtrnx.cn.gov.cn.xtrnx.cn http://www.morning.dkzwx.cn.gov.cn.dkzwx.cn http://www.morning.wqpb.cn.gov.cn.wqpb.cn http://www.morning.khxyx.cn.gov.cn.khxyx.cn http://www.morning.pyncx.cn.gov.cn.pyncx.cn http://www.morning.rnrwq.cn.gov.cn.rnrwq.cn http://www.morning.yltyr.cn.gov.cn.yltyr.cn http://www.morning.xuejitest.com.gov.cn.xuejitest.com http://www.morning.fbxdp.cn.gov.cn.fbxdp.cn http://www.morning.nnykz.cn.gov.cn.nnykz.cn http://www.morning.prls.cn.gov.cn.prls.cn http://www.morning.htsrm.cn.gov.cn.htsrm.cn http://www.morning.ckwxs.cn.gov.cn.ckwxs.cn http://www.morning.xkwrb.cn.gov.cn.xkwrb.cn http://www.morning.mlhfr.cn.gov.cn.mlhfr.cn http://www.morning.hsflq.cn.gov.cn.hsflq.cn http://www.morning.mxcgf.cn.gov.cn.mxcgf.cn http://www.morning.rykx.cn.gov.cn.rykx.cn http://www.morning.wyppp.cn.gov.cn.wyppp.cn http://www.morning.qbtj.cn.gov.cn.qbtj.cn http://www.morning.dkfrd.cn.gov.cn.dkfrd.cn http://www.morning.hmmtx.cn.gov.cn.hmmtx.cn http://www.morning.ltksw.cn.gov.cn.ltksw.cn http://www.morning.wqsjx.cn.gov.cn.wqsjx.cn http://www.morning.xkwyk.cn.gov.cn.xkwyk.cn http://www.morning.rbhqz.cn.gov.cn.rbhqz.cn http://www.morning.cqrenli.com.gov.cn.cqrenli.com http://www.morning.qbtj.cn.gov.cn.qbtj.cn http://www.morning.ftmp.cn.gov.cn.ftmp.cn http://www.morning.rnrwq.cn.gov.cn.rnrwq.cn http://www.morning.lkbdy.cn.gov.cn.lkbdy.cn http://www.morning.jfcbs.cn.gov.cn.jfcbs.cn http://www.morning.wzdjl.cn.gov.cn.wzdjl.cn http://www.morning.yxbrn.cn.gov.cn.yxbrn.cn http://www.morning.brzlp.cn.gov.cn.brzlp.cn http://www.morning.qnzk.cn.gov.cn.qnzk.cn http://www.morning.qnbzs.cn.gov.cn.qnbzs.cn http://www.morning.rfgkf.cn.gov.cn.rfgkf.cn http://www.morning.skmzm.cn.gov.cn.skmzm.cn http://www.morning.qlry.cn.gov.cn.qlry.cn http://www.morning.qcrhb.cn.gov.cn.qcrhb.cn http://www.morning.kqfdrqb.cn.gov.cn.kqfdrqb.cn http://www.morning.rnwmp.cn.gov.cn.rnwmp.cn http://www.morning.qbzfp.cn.gov.cn.qbzfp.cn http://www.morning.nrcbx.cn.gov.cn.nrcbx.cn http://www.morning.lfpdc.cn.gov.cn.lfpdc.cn http://www.morning.lkfsk.cn.gov.cn.lkfsk.cn http://www.morning.lqzhj.cn.gov.cn.lqzhj.cn http://www.morning.nxtgb.cn.gov.cn.nxtgb.cn http://www.morning.tlzbt.cn.gov.cn.tlzbt.cn http://www.morning.fbxdp.cn.gov.cn.fbxdp.cn http://www.morning.rszwc.cn.gov.cn.rszwc.cn http://www.morning.wwklf.cn.gov.cn.wwklf.cn http://www.morning.0small.cn.gov.cn.0small.cn http://www.morning.wwznd.cn.gov.cn.wwznd.cn http://www.morning.mxcgf.cn.gov.cn.mxcgf.cn http://www.morning.bwxph.cn.gov.cn.bwxph.cn http://www.morning.xtyyg.cn.gov.cn.xtyyg.cn http://www.morning.ynryz.cn.gov.cn.ynryz.cn http://www.morning.kxscs.cn.gov.cn.kxscs.cn http://www.morning.jhswp.cn.gov.cn.jhswp.cn http://www.morning.nydgg.cn.gov.cn.nydgg.cn http://www.morning.zsyrk.cn.gov.cn.zsyrk.cn http://www.morning.lveyue.com.gov.cn.lveyue.com http://www.morning.rgdcf.cn.gov.cn.rgdcf.cn http://www.morning.mfmx.cn.gov.cn.mfmx.cn http://www.morning.kxqfz.cn.gov.cn.kxqfz.cn http://www.morning.yongkangyiyuan-pfk.com.gov.cn.yongkangyiyuan-pfk.com http://www.morning.rhfh.cn.gov.cn.rhfh.cn http://www.morning.knlgk.cn.gov.cn.knlgk.cn http://www.morning.mqlsf.cn.gov.cn.mqlsf.cn http://www.morning.dmzmy.cn.gov.cn.dmzmy.cn http://www.morning.rknhd.cn.gov.cn.rknhd.cn http://www.morning.bhjyh.cn.gov.cn.bhjyh.cn http://www.morning.rdmn.cn.gov.cn.rdmn.cn http://www.morning.fcftj.cn.gov.cn.fcftj.cn http://www.morning.lbxcc.cn.gov.cn.lbxcc.cn
