微信官方Demo快速搭建了一个小相册，如何做服务端配置
发表时间：2023-10-31 08:04:53
文章来源：炫佑科技
浏览次数：143
菏泽炫佑科技 菏泽炫佑小程序开发 菏泽炫佑app制作 炫佑科技
微信官方Demo快速搭建了一个小相册，如何做服务端配置
在本教程中，我们将教您如何快速入门小程序开发。 以Hello World的不同级别为例，了解小程序基本配置，学习小程序整体开发框架，*终完成开发到发布的流程。
你好世界 - 入门
**阶段如何开发一个微信小程序，我们不需要了解小程序历史和技术细节。 您只需要跟着我们就可以完成基本的Hello World示例。
**步
参考之前的教程，下载微信开发工具，并根据您对应的操作系统进行安装。
第2步
打开微信开发工具，选择新建一个小程序项目。 我们不需要先了解AppID的概念。 创建新项目时选择或使用测试号：小程序系统会为您分配一个测试账号，并取消勾选“创建普通快速启动模板”选项，然后点击确定，如图。
0530-
第三步
在根目录下创建app.json并填写以下代码。
{
"pages": ["pages/index/index"]
}复制
0530-
在根目录下新建pages目录，然后在pages目录下新建index目录，然后在index目录下创建index.wxml，然后填写以下代码。
Hello World 复制
0530-
然后单击菜单栏上的项目 - 保存。 系统会自动创建index.js、index.json、index.wxss等目录文件并编译。 *后我们会看到小程序已经显示出了我们编写的代码Hello World文件。
0530-
恭喜您，您已经成功开发您的**小程序！ 这时候你尝试修改index.wxml中的hello world，然后保存看看会发生什么？
0530-
Hello World-小程序代码组成
在进阶实验之前，我们先来说一下小程序的历史以及上一步中配置文件的含义。
历史
从技术角度来看，小程序并不是一个凭空出现的概念。 2015年初，微信发布了一套名为JS-SDK的网页开发工具包，开放了拍照、语音识别、二维码等数十个API。 它为所有网络开发打开了一个新的窗口，让所有开发都可以利用微信原生的能力来完成以前不可能或很难做到的事情。
但在内部测试过程中，微信团队发现一些复杂的页面会出现白屏问题。 例如，页面加载了大量CSS或文件。 这些文件的执行时间占用了大量的UI线程。 除了白屏之外，还影响了Web体验。 另一个问题是操作反馈不足，主要体现在页面切换的僵硬和点击的滞后。 微信面临的问题是如何设计一个更好的系统，让所有开发都能在微信中获得更好的体验。 微信团队需要一个加载速度快、能力更强大、体验原生、易用安全微信数据开放、开发高效简单的系统，而这个系统就是本文需要阐述的小程序。
配置文件含义
在上一步中，我们创建了一个 app.json 文件和一个 index.wxml 文件。 系统还为我们创建了index.js、index.json、index.wxss等目录文件。 接下来，我们将解释这些文件的用途。 为了更直观的显示。 我们以 Hello world 为例。
第 1 步 - json 文件
打开刚才的开发工具编辑器，然后找到根目录下的app.json文件，双击打开代码，然后替换为以下代码。
{
"pages": [
"pages/index/index",
"pages/logs/logs"
],
"window": {
"backgroundTextStyle": "light",
"navigationBarBackgroundColor": "#fff",
"navigationBarTitleText": "WeChat",
"navigationBarTextStyle": "black"
}
}复制
0530-
我们看到现在的界面已经发生了很大的变化。 标题栏已从黑色变为白色，并且标题中多了一个名为“name”的字符。 然后，我们更改xt中的字符，将其更改为我们想要设置的内容。 字符，这里我把它们改成你想要设置的字符，然后把原来内部的#fff改成#ddd，然后保存看看会发生什么。
0530-
我们注意到，开发工具刷新后，顶部栏的文字由原来的变为了您自定义的字符，并且栏的颜色也发生了变化。
你现在明白了么？ JSON文件在小程序代码中起到静态配置的作用。 他们在小程序小程序的一些性能。 需要注意的是，小程序在运行过程中无法动态更新JSON配置文件而引起相应的变化。 。
第 2 步 - wxml 文件
打开入门中创建的index.wxml文件，将原来的代码替换为以下代码。
当前时间：{{time}} 复制
然后打开系统创建的index.js文件，找到data:{}行，然后在大括号内填写如下代码，如图。
time: (new Date()).toString()复制
0530-
接下来，我们按下保存按钮，看看会发生什么。
0530-
我们看到系统自动将{{time}}更改为当前时间，那么这里是如何实现的呢？ 原来，在小程序中，我们可以通过Dom接口，用代码来完成界面的实时更新。 WXML使用{{变量名}}来绑定WXML文件和相应文件中的数据对象属性。 我们在index.js中定义当前时间变量，然后通过WXML中的{{time}}获取该变量。 怎么样，你大概了解WXML 是做什么的吧？ 不明白？ 没关系，我们正在做一个实验。
在index.wxml 文件中，添加以下代码。
{{a + b}} + {{c}} = d
True 复制
和之前一样，在 index.js 的 data: {} 行中插入以下代码。
time: (new Date()).toString(),
a: 1, b: 2, c:3复制
0530-
我们看到系统通过逻辑运算已经渲染了我们的a、b、c变量。 同时我们用wx:if判断数字c的值是否大于1，如果大于则显示True字符。
现在，您大概了解 WXML 的用途了吧？ 我们先用官方文档来解释一下，WXML的全称是WXML，是小程序框架设计的一套标签语言。 结合小程序的基本组件和事件系统，就可以构建页面的结构。 如果你有点不明白，也没关系。 我来介绍一下。 WXML 是一种类似于 HTML 的超文本标记语言。 它可以描述你的小程序前端显示的外观。 它可以将你的代码转换成显示页面，然后配合WXSS和脚本。 ，你可以写出非常漂亮的小程序。
步骤3、wxss文件
现在，打开您的index.wxss 文件并输入以下代码。
/* pages/index/index.wxss */
.text-red{
color: red
}
.text-blue{
color: blue
}
.text-yellow{
color: yellow
}复制
然后，打开index.wxml文件并将所有文件替换为以下代码
当前时间：{{time}}
{{a + b}} + {{c}} = d
True 复制
保存看看效果。
0530-
我们可以看到，原本显示为黑色的小程序文字颜色变成了红色、蓝色、黄色。 这里改变的颜色和我们编辑的index.wxss文件中指定的颜色一模一样。 那么微信官方Demo快速搭建了一个小相册，如何做服务端配置，你明白wxss文件是做什么用的吗？ 是的，WXSS类似于Web开发中的CSS。 为了更适合小程序开发，WXSS对CSS做了一些补充和修改。 WXSS（Style）是一套针对小程序样式语言。 用于描述WXML的组件风格，即视觉效果。
第四步、js文件
我们在第二步中已经体验过js文件的使用了。 小程序的主要开发语言是开发用它来开发业务逻辑，调用小程序的API来完成业务需求。 不过严格来说，小程序里的和浏览器里的、小程序里的是不一样的。
浏览器由BOM（浏览器对象模型）和DOM（文档对象模型）组成。 Web 前端开发会熟悉这两种对象模型，它们允许开发操纵浏览器的某些性能。 比如修改URL、修改页面渲染、记录数据等。
它由NPM和模块组成。 开发将会非常熟悉 NPM 的包管理系统。 它们可以通过各种扩展包快速实现一些功能，同时使用一些原生模块如FS、HTTP、OS等，具备语言本身不具备的能力。
小程序由小程序框架和小程序API实现。 与浏览器中的相比，没有BOM和DOM对象，因此Zepto等浏览器库无法在小程序中运行。 还缺少 和 npm 包管理机制，小程序 库，大多数 NPM 包不能直接使用。
了解了不同浏览器在小程序上的差异后，开发还需要注意另一个问题。 不同平台的小程序的脚本执行环境也不同。
小程序目前可以运行在三大平台：
这种差异主要体现了三大平台执行的标准不同。 截至目前，该标准有七个版本。 目前大多数开发使用 5 和 6 标准。 但在小程序中，iOS9和iOS10使用的运行环境并不完全兼容6标准。 某些 6 中指定的语法和关键字不可用或与标准不同，因此一些开发会发现某些代码在旧的移动操作系统上存在一些语法错误。 为了帮助开发解决此类问题，小程序IDE提供了语法转码工具，帮助开发将6个代码转换为5个代码，使其在所有环境下都能很好地执行。 开发需要在项目设置中勾选ES6到ES5才能启用该功能。
Hello World -小程序的能力
在上一步中，我们已经熟悉了小程序的组成和代码布局。 这一步我们将介绍小程序的一些能力、组件和API。 和之前一样，我们通过Hello world 来学习。
小程序组件及API
我们在小程序代码编写步骤中打开index.wxml文件，然后在前面的代码中添加以下代码。
预览
复制
然后打开index.js文件，在page({后添加以下代码，如图。
takePhoto() {
const ctx = wx.createCameraContext()
ctx.takePhoto({
quality: 'high',
success: (res) => {
this.setData({
src: res.tempImagePath
})
}
})
},
error(e) {
console.log(e.detail)
}
})复制
0530-
然后，在根目录中创建一个名为 app.js 的文件。 暂时不要填写任何内容并保存。 接下来我们点击菜单栏中的预览按钮，然后用手机扫描弹出的二维码，然后用手机拍照。 弹出的照片将附加在预览字符下方。
0530-
预览效果如图
可以看到小程序可以正常拍照。 那么有同学就有疑问了，这里的代码到底是做什么的呢？ 接下来我就来解释一下。
成分
在上面的教程中，我们调用了以下代码。
预览
复制
不考虑其他内容，我们主要看一下中间代码的含义。 我们看到我们已经定义了属性-、flash、和style。 那么这些属性是什么意思呢？ 我们可以查看官方的组件文档，找到该组件，看到如下表的信息。
属性名称
类型
默认值
阐明
*低版本
模式
有效值为，
2.1.0
-
后退
正面还是背面，值为正面、背面
闪光
汽车
Flash，取值为auto、on、off
相机异常终止时触发，如退出后台等。
当用户不被允许使用相机时触发
一维码识别成功时触发，仅当mode=""时有效
2.1.0
我们看到该表只包含了-、flash、以及我们定义的内容。 原来——我们设置的front是选择前置摄像头还是后置摄像头，是显示如果用户不被允许使用摄像头会触发的事件。 Flash是当前选择是否打开闪光灯。 这里我们设置为auto，即自动状态。 我们暂时不需要担心风格。 这里指的是上一步wxss应该写的内容。 我们只是将其写入 wxml 文件中。
我们看到组件是小程序非常重要的一个功能。 组件是小程序的基本构建块。 为了让开发能够快速开发，小程序的宿主环境提供了一系列的基础组件。 我们刚才使用的组件是官方提供的用于调用系统底层摄像头的组件。 代码中显示的视图和图像都是组件。
由于篇幅限制，本文不会展开所有组件的属性描述。 使用时请前往官方文档查看相关组件说明。
应用程序编程接口
上面的文章中，我们其实已经调用了官方的API，你不信吗？ 我们来看看下面的代码。
takePhoto() {
const ctx = wx.createCameraContext()
ctx.takePhoto({
quality: 'high',
success: (res) => {
this.setData({
src: res.tempImagePath
})
}
})
},
error(e) {
console.log(e.detail)
}
})复制
熟悉吧，在这段代码中，我们调用了wx.()，微信官方提供的API文件。 该API的详细使用方法请参考官方API文档。
在此代码中，我们首先使用代码 const ctx = wx.() 将 wx.() 定义为 ctx。 然后使用ctx. 调用拍照方法。 关于使用方法，可以参考官方文档。 我们在代码中定义了这两个函数。 文件中规定了成像质量，我们选择高质量。 *终存储我们照片文件的是回调函数。 这里存储的是照片文件的临时路径。
然后，我们在index.wxml中调用index.js中的函数。 然后调用图像中的scr变量进行显示。
小程序发布
为了保证小程序的质量并符合相关规范，小程序的发布需要经过审核。 建议先自己复习一下。 自审完成后，我们就可以上传了。 值得注意的是，如果您需要发布，请将本小程序的AppID更改为您在小程序管理页面注册的AppID，点击微信开发工具详情，然后将AppID更改为您的AppID。
0530-
打开微信开发工具，然后点击菜单栏上的工具按钮，然后点击上传按钮。
0530-
在新弹出的页面中，我们设置版本号和项目注释。
0530-
然后点击上传。 之后，请打开您的微信公众平台小程序管理页面，对小程序进行审核和发布。
0530-
在接下来的页面中，单击开发版本，然后单击提交以供审核。 审核通过后，您的小程序就可以上线了！
总结
本章我们介绍小程序的基本运行机制以及它提供的各种能力。 结合这些能力就可以完成一个体验非常流畅的小程序。 同时还介绍了小程序编写完成后如何发布和上线。 当然，本文只是基础内容，后面会详细介绍各个组件和API。 如果您喜欢，请继续关注本专栏。 腾讯云携手小程序，为您带来小程序云开发解决方案，为开发提供完善的云支持，弱化后端和运维操作，采用平台原生API进行核心业务开发，实现快速上线和快速上线。迭代。 欢迎免费使用！
