（影琪）,微信小程序正式上线啦！！
发表时间：2023-09-27 16:30:56
文章来源：炫佑科技
浏览次数：132
菏泽炫佑科技 菏泽炫佑小程序开发 菏泽炫佑app制作 炫佑科技
（影琪）,微信小程序正式上线啦！！
微信的基本流程步骤小程序开发
更新时间：2019-01-31 10：50：29 作者：英祺
本文主要介绍微信小程序开发的基本流程步骤，小编觉得很不错，现在分享给大家，也给大家一个参考。下面就跟着小编一起来看看吧
一、微信小程序介绍
1、微信小程序简称
小程序，张小龙在微信公开课Pro上发布的小程序于2017年1月9日正式上线。
2、微信小程序
单词可以分为两部分：“微信”和“小程序”
（1）、其中“微信”可以理解为“在微信”，指小程序的执行环境;当然，微信不仅提供了执行环境，还延长了用户使用微信的时间。
（2）、“小程序”是指它首先是一个程序，然后具有轻盈的特点。小程序不像其他应用程序，不需要安装，而是通过扫描二维码等打开后直接执行;使用后无需卸载它。这就是所谓的“边跑即走”原则。
3、微信小程序，许多类似形式的应用都采用类似的架构：
4、JSON（）是一种轻量级的数据交换格式。它基于 W3C 规范的子集，并以完全独立于编程语言的文本格式存储和表示数据。简洁明了的层次结构使JSON成为数据交换的理想语言。它便于人们读写，也便于机器解析和生成，有效提高了网络传输效率。
5，XML（），中文称为可扩展标记语言，是标准通用标记语言的子集，是一种用于标记电子文件以使其具有结构的标记语言。
在电子计算机中，标记指计算机可以
理解的信息符号，通过这样的标记，计算机可以处理各种类型的信息，如物品。它可用于标记数据，定义数据类型，并且是允许用户定义自己的标记语言的源语言。它是万维网传输的理想选择，提供了一种统一的方式来描述和交换独立于应用程序或供应商的结构化数据。它是环境中一种跨平台、依赖于内容的技术，也是当今处理分布式结构信息的有效工具。早在 1998 年，W3C 就发布了 XML 1.0 规范，以简化文档信息的传输。
6、CSS级联样式表（英文全称：Style）是一种计算机语言，用来表达HTML或XML等文件的样式。CSS不仅可以静态地装饰网页，还可以使用各种脚本语言动态格式化页面的元素。CSS 可以在像素级别精确控制网页中元素的布局，支持几乎所有字体大小样式，并具有编辑 Web 对象和模型样式的能力。
7，一种文字脚本语言，它是一种动态类型、弱类型、基于原型的语言，内置了对类型的支持。它的解释器称为引擎，是浏览器的一部分，被广泛用作客户端脚本语言，首先用于HTML网页，为HTML网页添加动态功能。
二、注册微信小程序
在创建自己的微信小程序之前，您首先需要注册一个小程序账号，该账号类型如下：
具体注册流程可参考官方简单教程
第三，安装工具并创建项目
步骤1：下载微信小程序开发工具并安装，下载路径：
进入下载界面后，根据您的操作系统选择要下载的相应链接，下载完成后安装。
步骤 2：安装登录工具
安装后
开发工具，我们可以打开它，**次打开它就需要使用微信扫码登录，如下图所示，使用手机微信扫一扫确认登录。
步骤 3：选择项目类型
登录成功后，如果您是**次使用该工具，会弹出一个选择项目类型的窗口，如下所示
步骤 4：创建项目
选择项目类型成功后，会弹出创建项目的窗口，如下图所示
在创建过程中（影琪）,微信小程序正式上线啦！！，如果选择的本地文件夹为空文件夹会弹出勾选选项“创建云开发快速入门模板”，为了方便初学者了解微信小程序的基本代码结构，请勾选此项，勾选后，开发工具会在开发目录中帮助我们生成一个简单的演示， 如下图所示：
四、项目代码结构说明及开发
4.1、项目代码结构
通过单击开发工具侧面导航中的“编辑器”，我们可以看到该项目已初始化并包含一些简单的代码文件。*关键和*重要的是app.js，app.json和app.wxss。其中，.js后缀为脚本文件，.json后缀为配置文件，.wxss后缀为样式表文件。微信小程序读取这些文件并生成小程序实例。
下面我们简单了解一下这三个文件的功能，方便修改，从头开始开发自己的微信小程序。
1.应用.js是小程序的脚本代码。我们可以监听这个文件并处理小程序生命周期函数并声明全局变量。调用框架提供的丰富 API，例如本示例中的同步存储和本地数据的同步读取。
2.app.json 是整个小程序的全局配置。在此文件中，我们可以配置小程序包含哪些页面，配置小程序的窗口背景颜色，配置导航栏样式，配置默认标题。注意：在没有任何注释的情况下，无法对文件进行批注。
3.app.wxss 是整个小程序的公共样式表。我们可以直接在页面组件的类属性上使用 app.wxss 中声明的样式规则。
我们注意到示例程序的代码中有 2 个文件夹，一个是页面，一个是样式，其中 style 是常见样式的文件夹，页面是所有页面的文件夹。让我们专注于此页面
4.2、小程序页面文件组成在这个例子中，我们有七个页面，索引页面，
即欢迎页面，所有这些都在 pages 目录下。微信小程序中每个页面的【路径+页面名称】需要写在app.json的页面中，页面中的**个页面是小程序的首页。
每个小程序页面由四个不同的后缀文件组成，这些文件在同一路径下具有相同的名称，例如：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"
}
}
运行结果如下：
手机预览
开发工具的侧边菜单栏，点击“预览”，扫码后即可在微信客户端体验。
以上就是本文的全部内容，希望对你的学习有所帮助，也希望大家支持剧本屋。
