微信小程序简介及应用程序的应用方法介绍
发表时间：2023-10-07 18:07:47
文章来源：炫佑科技
浏览次数：195
菏泽炫佑科技 菏泽炫佑小程序开发 菏泽炫佑app制作 炫佑科技
微信小程序简介及应用程序的应用方法介绍
1.微信小程序简称小程序。 张小龙在微信公开课Pro上发布的小程序于2017年1月9日正式上线。
2、微信小程序这个词可以分解为两个部分：“微信”和“小程序”
(1)、“微信”可以理解为“微信内”，指的是小程序的执行环境； 当然，微信不仅提供了执行环境，还延长了用户使用微信的时间。
(2)、“小程序”意味着它首先是一个程序，然后具有可移植性的特点。 小程序与其他应用程序不同。 它们不需要安装。 相反，它们可以通过扫描二维码直接打开并执行。 使用后无需卸载它们。 这就是所谓的“用完即用”原则。
3.微信小程序，很多类似形式的应用都采用类似的架构：
4、JSON()是一种轻量级的数据交换格式。 它基于 W3C 开发的规范子集，并使用完全独立于编程语言的文本格式来存储和表示数据。 简单性和清晰的层次结构使 JSON 成为理想的数据交换语言。 易于人读写，也易于机器解析和生成，有效提高网络传输效率。
5.XML（XML），中文名称是可扩展标记语言，标准通用标记语言的子集。 它是一种标记语言，用于标记电子文档以使它们结构化。
在电子计算机中，标签是指计算机能够理解的信息符号。 通过这样的标签，计算机可以处理各种信息，例如文章等。它可以用来标记数据并定义数据类型。 它是一种源语言，允许用户定义自己的标记语言。 它非常适合万维网传输，提供独立于应用程序或供应商的统一方法来描述和交换结构化数据。 它是环境中跨平台、内容依赖的技术，也是当今处理分布式结构化信息的有效工具。 早在1998年，W3C就发布了XML1.0规范，用它来简化文档信息的传输。
6、CSS层叠样式表（英文全称：Style）是一种用于表达HTML或XML等文件样式的计算机语言。 CSS不仅可以静态地修改网页，还可以与各种脚本语言配合微信小程序简介及应用程序的应用方法介绍，动态地格式化网页的各种元素。 CSS可以对网页中元素位置的布局进行像素级的精确控制，支持几乎所有的字体大小和样式，并具有编辑网页对象和模型样式的能力。
7，一种文字脚本语言，是一种动态类型、弱类型、基于原型的语言，具有内置类型支持。 它的解释器称为引擎，是浏览器的一部分。 它广泛用于客户端脚本语言。 它首先用在HTML网页上，为HTML网页添加动态功能。
2.注册微信小程序
在创建自己的微信小程序之前，您首先需要注册一个小程序账号。 有以下几种账户类型：
具体注册流程请参考官方简单教程。
3.安装工具并创建项目
**步：下载微信小程序开发工具并安装。 下载路径：
稳定版构建 | 微信开放文档
进入下载界面后，根据您的操作系统选择相应的链接进行下载，下载完成后进行安装。
第二步：安装登录工具
开发工具安装完成后，我们就可以打开它了。 首次打开时，需要扫码使用微信登录，如下图。 用手机微信扫描并确认登录。
第三步：选择项目类型
登录成功后，如果您是**次使用该工具，会弹出选择项目类型的窗口，如下图：
第四步：创建项目
成功选择项目类型后，会弹出创建项目的窗口，如下图：
创建过程中，如果选择的本地文件夹为空文件夹，则会出现勾选“创建云开发快速启动模板”选项。 为了方便初学者了解微信小程序的基本代码结构，请勾选此选项。 选择后，开发工具会帮我们在开发目录下生成一个简单的demo，如下图：
4. 项目代码结构描述及开发4.1． 项目代码结构
点击开发工具侧面导航中的“编辑器”，我们可以看到这个项目已经初始化完毕，并且包含了一些简单的代码文件。 *关键、*本质的是app.js、app.json和app.wxss。 其中.js后缀是脚本文件，.json后缀是配置文件，.wxss后缀是样式表文件。 微信小程序会读取这些文件并生成小程序实例。
下面我们简单了解一下这三个文件的作用，方便从头开始修改和开发自己的微信小程序。
1.app.js是小程序的脚本代码。 我们可以监控和处理小程序的生命周期函数，并在这个文件中声明全局变量。 调用框架提供的丰富API，例如本例中的同步存储、同步读取本地数据。
2、app.json是整个小程序的全局配置。 在这个文件中，我们可以配置小程序由哪些页面组成，配置小程序的窗口背景颜色，配置导航栏样式，配置默认标题。 请注意，不能向该文件添加任何注释。
3、app.wxss是整个小程序的公共样式表。 我们可以直接在页面组件的class属性上使用app.wxss中声明的样式规则。
我们注意到示例程序的代码中有两个文件夹，一个是pages，一个是style，其中style是通用样式的文件夹，pages是存放所有页面的文件夹。 让我们重点关注这个页面。
4.2. 小程序页面文件组成
在这个例子中，我们有七个页面，索引页面，欢迎页面，它们都在pages目录中。 app.json的pages中需要写入微信小程序中每个页面的【路径+页面名称】手机微信小程序开发，pages中的**个页面就是小程序的首页。
每个小程序页面由同一路径下四个不同的同名后缀文件组成，如：index.js、index.wxml、index.wxss、index.json。 .js 后缀的文件是脚本文件，.json 后缀的文件是配置文件，.wxss 后缀的文件是样式表文件，.wxml 后缀的文件是页面结构文件。
index.wxml是页面的结构文件：
jackson影琪
Hello world
本例中，“>”、“>”、“>”用于构建页面结构、绑定数据和交互处理功能。
index.js 是页面的脚本文件。 在这个文件中，我们可以监控和处理页面的生命周期函数、获取小程序实例、声明和处理数据、响应页面交互事件等。
//index.js
const app = getApp()
Page({
data: {
avatarUrl: './user-unlogin.png',
userInfo: {},
logged: false,
takeSession: false,
requestResult: ''
},
onLoad: function() {
if (!wx.cloud) {
wx.redirectTo({
url: '../chooseLib/chooseLib',
})
return
}
// 获取用户信息
wx.getSetting({
success: res => {
if (res.authSetting['scope.userInfo']) {
// 已经授权，可以直接调用 getUserInfo 获取头像昵称，不会弹框
wx.getUserInfo({
success: res => {
this.setData({
avatarUrl: res.userInfo.avatarUrl,
userInfo: res.userInfo
})
}
})
}
}
})
},
onGetUserInfo: function(e) {
if (!this.logged && e.detail.userInfo) {
this.setData({
logged: true,
avatarUrl: e.detail.userInfo.avatarUrl,
userInfo: e.detail.userInfo
})
}
},
onGetOpenid: function() {
// 调用云函数
wx.cloud.callFunction({
name: 'login',
data: {},
success: res => {
console.log('[云函数] [login] user openid: ', res.result.openid)
app.globalData.openid = res.result.openid
wx.navigateTo({
url: '../userConsole/userConsole',
})
},
fail: err => {
console.error('[云函数] [login] 调用失败', err)
wx.navigateTo({
url: '../deployFunctions/deployFunctions',
})
}
})
},
// 上传图片
doUpload: function () {
// 选择图片
wx.chooseImage({
count: 1,
sizeType: ['compressed'],
sourceType: ['album', 'camera'],
success: function (res) {
wx.showLoading({
title: '上传中',
})
const filePath = res.tempFilePaths[0]
// 上传图片
const cloudPath = 'my-image' + filePath.match(/\.[^.]+?$/)[0]
wx.cloud.uploadFile({
cloudPath,
filePath,
success: res => {
console.log('[上传文件] 成功：', res)
app.globalData.fileID = res.fileID
app.globalData.cloudPath = cloudPath
app.globalData.imagePath = filePath
wx.navigateTo({
url: '../storageConsole/storageConsole'
})
},
fail: e => {
console.error('[上传文件] 失败：', e)
wx.showToast({
icon: 'none',
title: '上传失败',
})
},
complete: () => {
wx.hideLoading()
}
})
},
fail: e => {
console.error(e)
}
})
},
})index.wxss 是页面的样式表：
/**index.wxss**/
page {
background: #f6f6f6;
display: flex;
flex-direction: column;
justify-content: center;
}
.userinfo, .uploader, .tunnel {
margin-top: 40rpx;
height: 140rpx;
width: 100%;
background: #fff;
border: 1px solid rgba(0, 0, 0, 0.1);
border-left: none;
border-right: none;
display: flex;
flex-direction: row;
align-items: center;
transition: all 300ms ease;
}
.userinfo-avatar {
width: 100rpx;
height: 100rpx;
margin: 20rpx;
border-radius: 50%;
background-size: cover;
background-color: white;
}
.userinfo-avatar:after {
border: none;
}
.userinfo-nickname {
font-size: 32rpx;
color: #007aff;
background-color: white;
background-size: cover;
}
.userinfo-nickname::after {
border: none;
}
.uploader, .tunnel {
height: auto;
padding: 0 0 0 40rpx;
flex-direction: column;
align-items: flex-start;
box-sizing: border-box;
}
.uploader-text, .tunnel-text {
width: 100%;
line-height: 52px;
font-size: 34rpx;
color: #007aff;
}
.uploader-container {
width: 100%;
height: 400rpx;
padding: 20rpx 20rpx 20rpx 0;
display: flex;
align-content: center;
justify-content: center;
box-sizing: border-box;
border-top: 1px solid rgba(0, 0, 0, 0.1);
}
.uploader-image {
width: 100%;
height: 360rpx;
}
.tunnel {
padding: 0 0 0 40rpx;
}
.tunnel-text {
position: relative;
color: #222;
display: flex;
flex-direction: row;
align-content: center;
justify-content: space-between;
box-sizing: border-box;
border-top: 1px solid rgba(0, 0, 0, 0.1);
}
.tunnel-text:first-child {
border-top: none;
}
.tunnel-switch {
position: absolute;
right: 20rpx;
top: -2rpx;
}
.disable {
color: #888;
}
.service {
position: fixed;
right: 40rpx;
bottom: 40rpx;
width: 140rpx;
height: 140rpx;
border-radius: 50%;
background: linear-gradient(#007aff, #0063ce);
box-shadow: 0 5px 10px rgba(0, 0, 0, 0.3);
display: flex;
align-content: center;
justify-content: center;
transition: all 300ms ease;
}
.service-button {
position: absolute;
top: 40rpx;
}
.service:active {
box-shadow: none;
}
.request-text {
padding: 20rpx 0;
font-size: 24rpx;
line-height: 36rpx;
word-break: break-all;
}
.text-title{
margin-top: 50%;
}
.text-title text{
font-size: 96rpx;
font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
}页面的样式表是可选的。 当存在页面样式表时，页面样式表中的样式规则会级联到app.wxss中的样式规则。 如果不指定页面的样式表，也可以直接使用页面结构文件中app.wxss中指定的样式规则。
index.json 是页面的配置文件：
页面配置文件是可选的。 当存在页面配置文件时，页面中的配置项会覆盖app.json中相同的配置项。 如果没有指定页面配置文件，页面会直接使用app.json中的默认配置。
{
"pages": [
"pages/index/index",
"pages/userConsole/userConsole",
"pages/storageConsole/storageConsole",
"pages/databaseGuide/databaseGuide",
"pages/addFunction/addFunction",
"pages/deployFunctions/deployFunctions",
"pages/chooseLib/chooseLib"
],
"window": {
"backgroundColor": "#F6F6F6",
"backgroundTextStyle": "light",
"navigationBarBackgroundColor": "#F6F6F6",
"navigationBarTitleText": "jackson影琪",
"navigationBarTextStyle": "black"
}
}运行结果如下：
手机预览
点击开发工具侧菜单栏“预览”，扫码即可在微信客户端体验。
*后，如果您对硬件和编程感兴趣，可以点击牛客网的这个链接。 是一个很好的学习网站。 是学长推荐给我的，因为我之前找工作的时候没有太多经验，也不知道。 如何准备，去哪里寻找资源，走了很多弯路，所以推荐给大家。 在上面研究了很多题，看了很多面试经验等等，反正上面的资源很多包括课程+题库+面试+找工作+论坛等等，所有资源都在重点向公众免费开放，无需花钱，希望能对大家有所帮助！
