如何开发微信小程序（全解过程包括前端、后端）

article/2025/10/14 11:01:53

微信小程序开发基础知识：

（1）手机的屏幕宽度的最大为750rpx（数据与rpx连写）；
（2）ctrl+s 保存即可运行新写的代码；
（3）新建项目的过程：
1、 创建时不要选择云开发；
2、 生成pages文件后，将pages文件中系统自动生成的文件都删除掉；
3、然后自己在pages文件夹下创建自己的界面（右键->创建文件夹->在在创建的文件夹下右键->创建page）
4、根据自己创建的文件夹路径修改app.json的 pages：{} 中的参数路径
如下，文件名为home

"pages": ["pages/home/home""pages/home2/home2"],

【注】哪个在前，调试时就会默认为初试界面。
5、创建界面主控制框（手机下方的切换界面）
在app.json中的主{}中创建如下代码：

 "tabBar": {"list": [{"pagePath": "pages/home/home","text": "首页","iconPath": "inco/HOME.png","selectedIconPath": "inco/HOME_select.png"},{"pagePath": "pages/home2/home2","text": "首页2","iconPath": "inco/HOME.png","selectedIconPath": "inco/HOME_select.png"}]

iconPath：表示按键图标（未选择时的），添加图标路径
selectedIconPath：表示按键按下后（选择了为当前页面），添加图标路劲
list 的元素个数至少为2，效果如图：
在这里插入图片描述

wxml语法

基础标签

<text></text> 文本标签 
属性说明：<view></view> 布局块标签（最常用标签） 
属性说明：<image></image> 图片标签 
属性说明：<video></video> 视频标签
属性说明：
src		        要播放视频的资源地址，支持网络路径、本地临时路径、等
controls		是否显示默认播放控件（播放/暂停按钮、播放进度、等）
autoplay   	是否自动播放，false/true <audio></audio> 音频标签
属性说明：
controls	是否显示默认控件，false/true 
poster	 	默认控件上的音频封面的图片资源地址，如果 controls 属性值为 false 则设置 poster 无效	
name		默认控件上的音频名字，如果 controls 属性值为 false 则设置 name 无效	1.0.0
author		默认控件上的作者名字，如果 controls 属性值为 false 则设置 author 无效	<scroll-view></scroll-view>滑动条标签
属性说明：
scroll-x	false/true	允许横向滚动	
scroll-y	false/true  允许纵向滚动
**注**：一个超出scroll-view尺寸的view来带动多元素滑动。<swiper>可视化滚动标签<swiper-item>滚动元素</swiper-item> 
</swiper>
属性说明：
indicator-dots		           false/true 	                是否显示面板指示点	
indicator-color	               rgba(0, 0, 0, .3)		    指示点颜色	
indicator-active-color	       #000000		                当前选中的指示点颜色	 
autoplay	boolean	           false/true	                是否自动切换
interval	                   5000                   	    自动切换时间间隔（单位为毫秒）每一个标签都能用 class 属性命名用于wxss添加样式

for循环

js中的对应代码如下：

  /*** 页面的初始数据*/data: {  arr:["a","b","c","d"],arr1:[{"name":"derek1","age":18},{"name":"derek2","age":19}]}

对应的for循环的wxml的程序题为：

<!-- wx:for="{{arr}} 表示将arr数组的长度作为for循环次数 -->
<!--  {{item}} 中的item表示arr中的元素，属于关键字 -->
<view class="box" wx:for="{{arr}}">{{item}}
</view><view class="box" wx:for="{{arr1}}">
{{item.name}}
{{item.age}}
</view>

if判断语句

<block wx:for="{{arr}}">                                            <!--以空白块为for循环的载体--><view wx:if="{{item.tag==true}}" class="right_view">              <!--if条件语句的调用格式--><image class="right_head" src="{{item.head}}"></image><view class="right">{{item.text}}</view></view><view wx:else class="left_view">                                  <!--else调用--><image class="left_head" src="{{item.head}}"></image><view class="left">{{item.text}}</view></view>
</block>

获取输入框input中的值

（使得输入框值实时在控制台显示，同时实时存在data中）
【注意】这里用的不再是“bindtap”而是使用“bindinput”属性
wxml中的代码：

	<input type="text" bindinput="bindinput" class="input_text"></input>

对应js中的的代码：

// 与界面输入框绑定实时获取输入框内容
bindinput:function(e){this.setData({inputvalue:e.detail.value})console.log(e.detail.value)
},

wxss语法

基础：添加样式的格式为
.class名{
css样式
}
1、从左到右排列，一排排满自动换为第二排

  display: flex;         /*弹性布局*/justify-content: flex-start; /*从左往右排*/flex-wrap: wrap; /*满行自动换行*/

2、左右浮动，即

float:left;
float:rigt;

3、position： 相对位置（relative）、绝对位置（absolute）

 position: relative;（相对位置，即与上一次位置的相对位置）left: 8rpx; position: absolute;（绝对位置，）

4、文字超出区域采用省略号的效果（得给文字view创建一个父级的view使用才有效果）

/*文字超出出现省略号*/word-break: break-all;overflow: hidden;text-overflow: ellipsis;display: -webkit-box;-webkit-line-clamp: 2;-webkit-box-orient: vertical;

5、一些基本样式：

 letter-spacing: 5rpx;//文字间距text-align: center;//文字左右居中margin：//间距

js语法

1、data数据的使用

   * 页面的初始数据*///messagge为json格式定义，并点语法调用data: {msg:"hello!",messagge:{name:"derk",age:10,text:"xiaxia"},src_img:"https://dss1.bdstatic.com/70cFvXSh_Q1YnxGkpoWK1HF6hhy/it/u=2561262272,416611847&fm=26&gp=0.jpg"},
// 点击事件，通过与组件链接调用该函数fn1:function(){console.log(1111);//打印数据this.setData({msg:"1**********"})//更改显示的数据和前面的data链接},fn2:function(){console.log(2222);//打印数据this.setData({msg:"2**********"})//更改显示的数据和前面的data链接},fn3:function(){this.setData({src_img:"https://dss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=2237600483,1886810625&fm=26&gp=0.jpg"})},

与 .wxml 文件中的链接与显示如下：

<!-- 显示msg的内容 -->
<view class="evidence"><view>{{msg}}</view>
</view><!-- 与函数fn1和fn2链接 bintap属性的使用 -->
<view class="control">
<view class="button1" bindtap="fn1">显示1</view>
<view class="button2" bindtap="fn2">显示2</view>
</view><!-- 切换图片 -->
<view class="picture"> <image src="{{src_img}}"></image>
</view><!-- 切换图片按钮 -->
<view class="but_picture" bindtap="fn3">顺切换</view><!-- Json格式数据点语法调用 -->
<view>{{messagge.name}}</view>
<view>{{messagge.age}}</view>
<view>{{messagge.text}}</view>

2、data的数据修改

data:{}
名: function(){this.setData({x:"xxx"})
}

【注】：this.setData({内容}) 中的指令，（1）当data中有x变量，则同名覆盖；（2）data中没有x变量，则执行新建。

3、给data中已定义的数组新增元素

// 给data里面的arr数组加入新的成分
adddata:function(){var new_data=this.data.arr;new_data.push({tag:true,text:this.data.inputvalue,head:"../../inco/1.jpg"})this.setData({arr:new_data})
},

nodejs的使用：创建后端服务器

1、检查nodejs时候下载好：
在文件输入框中输入cmd，调出终端框，在指令行输入：

node -v

提示出现版本号，即配置没有问题
2、在cmd指令框中输入，初始化项目

 npm init egg --type=simple

3、完成初始化后，会提示运行以下代码：

npm run dev

（后续启动服务器都使用这段指令，且需要在初始化的文件中的输入框中调出cmd后输入）
4、会出现丢包问题
终端提示：‘egg-bin’ 不是内部或外部命令，也不是可运行的程序或批处理文件。
解决：则输入以下指令

npm i

5、完成后再运行

npm run dev

则当出现：egg started on http://127.0.0.1:7001 的提示即服务器创建完成。
测试：
在浏览器中输入http://127.0.0.1:7001可以看到提示“hi，egg”。

6、如何修改服务器显示的内容（hi.egg）
在创建的文件下位置中的找到app文件，其中的controller文件中的home.js即可看见到显示的内容代码：如图：
在这里插入图片描述
通过修改ctx.body的值即可改变网页显示的内容。
【注】
ip ：127.0.0.1表示本机ip，别人不能访问；别人能访问的ip可通过在cmd中输入ipconfig查看IPV4 ，其指示就是可被别人访问的i
（如果需要收集访问的话，需要查看连接无线局域网的IPv4的值）
port（端口）的意思是一个电脑供程序访问的接口。

7、测试显示图片
在创建的文件中找到app文件，将需要放在网页的图片放在app文件中的public文件夹中，并在浏览器的输入框中输入http://127.0.0.1:7001/public/1111.png，1111.png是我要显示图片的名字。效果如下：
在这里插入图片描述
在微信小程序中如何使用自己的服务器资源：
即在js文件中的data：{}中定义与资源相同的网址即可（但是必须为IPv4的ip，不能为本地ip）
在这里插入图片描述
【提示】在后续后端的开发中，不需要再次创建文件并初始化操作，只需要将已经第一次初试化的文件压缩保存即可，下次时候的时候，解压使用即可。

【注意】在生成微信二维码之前，在微信开发工具的“详情”中勾选：“不校验合法域名、web-view。。。。”

前端访问后端数据过程

基础操作
1、使用vscode打开初始化生成的node文件，编辑 router.js 和 home.js 中的代码
【注意！注意！注意！】：编辑好了后，一定必须保存工程（save all），点击save只能保存当前的编辑界面，否则在启动node网络服务器时会报错误！！！！！

2、编辑好后，保存工程再在node初始化的文件中输入框使用cmd调出终断指令框，使用npm run dev 启动服务器

3、前端（微信开发工具）请求后端的数据并显示：请求：wx.request，wxml前面部分所提到的语法即可显示内容在界面

前端js代码

load2:function(){wx.request({url: 'http://192.168.0.104:7001/zcx_2',//请求的后端服务器地址success:(res2)=>{console.log(res2.data)this.setData({text2:res2.data})   //即是在data:{}创建text2的对象，可供wxml中的标签使用})},

后端的js代码：

（1）router.js 中的代码（主要定义网站是与链接函数）

'use strict';/*** @param {Egg.Application} app - egg application*/
module.exports = app => {const { router, controller } = app;//router.get('/', controller.home.index);//该功能是设置网址为/zcx，对应调用controler文件夹中home文件中的zcx函数router.get('/zcx', controller.home.zcx);router.get('/zcx_2', controller.home.zcx_2);};

（2）controler中的 home.js 中的代码（主要是定义与router.js链接的函数的功能）

'use strict';const Controller = require('egg').Controller;class HomeController extends Controller {// async index() {//   const { ctx } = this;//   ctx.body = '66666666';// }//router.js中使用代码调用zxc函数的功能即是将ctx.body的内容传给访问的前端async zcx() {const { ctx } = this;ctx.body = 'this is my data';}async zcx_2() {const { ctx } = this;ctx.body = [{"name":"derek","age":18,"grads":"10"},{"name":"derek1","age":19,"grads":"9"},{"name":"derek3","age":20,"grads":"8"}];}
}
module.exports = HomeController;

后端访问腾讯AI智能闲聊（采用的GET请求方式）

router.js中的需要定义的函数：

router.get('/text2', controller.home.text2);

（nodejs中app->counter->home.js）

 async text2() {const { ctx } = this;console.log(ctx.request.query);//打印前端发来的信息//1.把前端的发过来的数据发送过AI，改地址是在腾旭AI中接力能力后获取的文档中的信息var url="https://api.ai.qq.com/fcgi-bin/nlp/nlp_textchat";var obj = {app_id: 2154766358,//申请应用时分配的session: 'zcx',//为了让AI知道是与同一个人在进行聊天（随便写）question: ctx.request.query.info,//用户会话信息（info是在微信js中定义的）time_stamp: parseInt((new Date().getTime() / 1000)),nonce_str: parseInt((new Date().getTime() / 1000)),sign: ''//签名信息，下面会计算};//以下为签名信息（sign）的计算过程//1const newkey = Object.keys(obj).sort();var params = {};for (var i = 0; i < newkey.length; i++) {params[newkey[i]] = obj[newkey[i]];}//2let str = '';for (const k in params) {if (params.hasOwnProperty(k) && params[k]) {str += k + '=' + encodeURIComponent(params[k]) + '&';}}//3str += 'app_key=' + 'o4ZCz3Mmzy5dTeeZ';//4//要去node小黑框中下载: npm i md5 --save  还要引入:const md5=require("md5")var singstr=md5(str).toUpperCase();//5，设置签名obj.sign=singstr;//准备工作完成，即可发送给腾讯AI进行处理var result= await this.ctx.curl(url,{dataType:"json",//获取数据格式（文档中有细说）data:obj,})console.log(result)ctx.body = result;//AI返回的数据，微信前端在这里获取}

前端接收AI返回的是数据并处理

在此之前，需要做的是腾讯ai开放平台
申请ai应用: https://ai.qq.com/
==>获取App_ID和App_Key，以下代码需要使用

// 发送按钮的点击事件
adddata:function(){
//这里是给data中定义的数组加入新元素var new_data=this.data.arr;new_data.push({tag:true,text:this.data.inputvalue,//获取data中的inputvalue变量（该变量与输入框相绑定）head:"../../inco/1.jpg"})this.setData({arr:new_data})//重新刷新一次数组（存储的聊天记录）this.setData({scrolltop:1000})//改参数是为了使聊天记录时钟置低（与wxml中的scroll-view的scroll-top参数相照应）//发送数据（下面data中的内容）给后端，并用success获取后端返回的数据wx.request({url: 'http://192.168.0.101:7001/text2',//后端地址//发送信息给后端data:{info:this.data.inputvalue},success:(res)=>{//处理AI发送过来的json信息console.log(res.data.data.data.answer);this.data.arr.push({tag:false,text:res.data.data.data.answer,head:"../../inco/2.jpg"})this.setData({arr:this.data.arr})this.setData({scrolltop:1000})}})},

智能聊天效果图

在这里插入图片描述


http://chatgpt.dhexx.cn/article/ePiu2JjL.shtml

相关文章

前端—微信小程序开发

前端—微信小程序开发

随着微信的普及和微小程序的广泛应用&#xff0c;微信小程序开发越来越多受到人们的关注&#xff0c;正在成为新工科和人工智能背景下当代大学生的必备技能。 适应对象 该课程适合电子信息类专业学生进行学习。 微信小程序开发课程共六章&#xff0c;通过对微信小程序开发的…
阅读更多...
从零开始,开发一个电商微信小程序[前端+后端(c#)]

从零开始,开发一个电商微信小程序[前端+后端(c#)]

如何快速搭建一个自己的小程序。 前言：随着微信小程序的迅速发展,用户流量巨大,开发成本低等特点,现在已经成了前端工程师必会的一个技能。 目录 一、后端MVC架构创建二、创建小程序三、实现API接口操作数据四、小程序调用后端Api一、后端MVC架构
阅读更多...
【微信小程序】基于SpringBoot开发后端

【微信小程序】基于SpringBoot开发后端

微信小程序登录流程&#xff1a; 主要步骤&#xff1a; 1、小程序端调用 wx.login()向微信接口服务获取临时登录凭证code&#xff0c;并上传至开发者服务端。 2、开发者服务端向微信服务接口服务调用 auth.code2Session 接口&#xff0c;换取用户唯一标识OpenID和会话密钥sessi…
阅读更多...
微信小程序后端Java接口开发

微信小程序后端Java接口开发

微信小程序后端Java接口开发 微信小程序使用wx.request(OBJECT)来调用后端接口。 首先 我们来一个简单案例 —— helloworld实现 1、搭建一个springboot项目并引入依赖 <dependency><groupId>org.springframework.boot</groupId><artifactId>spring…
阅读更多...
第一个web项目-微信小程序后端开发

第一个web项目-微信小程序后端开发

文章目录 第一个web项目-微信小程序后端开发前言需求分析团队分工总体设计开发工具及编码实现小程序前端后端数据库接口代码 管理系统前端1.0管理系统前端2.0 测试后端本地测试前后端联合测试 部署总结 第一个web项目-微信小程序后端开发 前言 去年暑假一个偶然的机会我和几位…
阅读更多...
微信小程序开发（后端 Java）

微信小程序开发（后端 Java）

微信使用的开发语言和文件很「特殊」。 小程序所使用的程序文件类型大致分为以下几种&#xff1a; ①WXML (WeiXin Mark Language&#xff0c;微信标记语言) ②WXSS (WeiXin Style Sheet&#xff0c;微信样式表) ③JS (Java&#xff0c;小程序的主体) 小伙伴们有兴趣想了解…
阅读更多...
微信小程序开发【前端+后端（java）】

微信小程序开发【前端+后端（java）】

前言 现在微信小程序越来越火了&#xff0c;相信不少人都通过各种途径学习过微信小程序或者尝试开发&#xff0c;作者就是曾经由于兴趣了解开发过微信小程序&#xff0c;最终自己的毕业设计也是开发一个微信小程序。所以现在用这篇博客记录我之前开发的一些经验和一些心得吧。 …
阅读更多...
微信小程序开发前后端交互快速入门

微信小程序开发前后端交互快速入门

目录 第 1 章 小程序特点 1.1 小程序特点概述 1.2 小程序配置 全局配置&#xff1a; app.json 页面配置: 页面名称.json sitemap 配置: sitemap.json 1.3 小程序框架接口 App Page 第 2 章 wxml 语法 2.1 数据绑定 初始化数据 使用数据 修改数据 2.2 事件绑定 事…
阅读更多...
1. KVM虚拟化理论知识

1. KVM虚拟化理论知识

基本概念 虚拟化是指在一个物理上运行多台虚拟机&#xff0c;各虚拟机之间共享cpu、内存等资源&#xff0c;但在逻辑上是相互隔离的。这样的物理机被称为是宿主机&#xff0c;各个虚拟机被称为是客户机 虚拟化的本质是资源抽象化&#xff0c;将资源最小化&#xff0c;按需使用…
阅读更多...
KVM（Kernel-basedVirtual Machine）虚拟化技术——超详细理论+实验！！！

KVM（Kernel-basedVirtual Machine）虚拟化技术——超详细理论+实验！！！

文章目录 一、虚拟化技术(KVM)是什么&#xff1f;1.1 KVM技术的具体作用 二、KVM技术发展2.1 虚拟化类型 三、KVM运行时的三种模式四、KVM工作原理五、KVM特性5.1 优势5.2 劣势 六、虚拟化前、后对比6.1 虚拟化前6.2 虚拟化后 七、KVM虚拟化平台实操7.1 拓扑图7.2 虚拟机资源环…
阅读更多...
KVM虚拟化(1) | KVM简介

KVM虚拟化(1) | KVM简介

目录 1、kvm架构 2、架构解析 3、kvm和qemu的作用 1、kvm架构 2、架构解析 从rhel6开始使用&#xff0c;红帽公司直接把KVM的模块做成了内核的一部分。xen用在rhel6之前的企业版中默认内核不支持&#xff0c;需要重新安装带xen功能的内核KVM 针对运行在x86 硬件上的、驻留在…
阅读更多...
KVM 虚拟化技术 | 虚拟化平台部署

KVM 虚拟化技术 | 虚拟化平台部署

KVM 虚拟化技术 一、虚拟化技术1.1 概述1.2 类型① 全虚拟化② 半虚拟化③ 直通 1.3 特点 二、KVM2.1 概述2.2 原理2.3 虚拟化架构2.4 工作流程 三、部署 KVM 虚拟化平台3.1 宿主机最低配置3.2 环境优化① 关闭 DNS 反向解析② 将镜像光盘设置为自动挂载③ 设置本地源和网络源④…
阅读更多...
KVM虚拟化技术(理论理解以及虚拟化平台搭建步骤)

KVM虚拟化技术(理论理解以及虚拟化平台搭建步骤)

KVM虚拟化技术 文章目录 KVM虚拟化技术一、虚拟化产生背景二 、虚拟化技术简介2.1 虚拟化技术2.2 虚拟化技术发展2.3 虚拟化类型2.4 特性 三、KVM3.1 广义KVM3.2 KVM架构以及原理3.3 KVM工作流程 四、KVM虚拟化平台部署一、虚拟机资源二、实验环境三、安装KVM三、设置KVM网络四…
阅读更多...
KVM虚拟化技术的-NUMA技术和应用

KVM虚拟化技术的-NUMA技术和应用

KVM虚拟化技术的-NUMA技术和应用 NUMA技术是解决多CPU共同工作的技术方案&#xff0c;多CPU共同工作主要有3中架构&#xff1a;SMP&#xff1a;Symmetric Multi-Processor)&#xff0c;非统一存储访问结构(NUMA&#xff1a;Non-Uniform Memory Access)&#xff0c;以及海量并行…
阅读更多...
KVM虚拟化技术之使用Qemu-kvm创建和管理虚拟机

KVM虚拟化技术之使用Qemu-kvm创建和管理虚拟机

一 .KVM 简介 KVM &#xff08;名称来自英语&#xff1a; Kernel-basedVirtual Machine 的缩写&#xff0c;即基于内核的虚拟机&#xff09; &#xff0c; 是一种用于Linux内核中的虚拟化基础设施&#xff0c;可以将Linux内核转化为一个hypervisor。KVM在2007年2月被导入Linux …
阅读更多...
KVM-虚拟化技术之Hypervisor-架构

KVM-虚拟化技术之Hypervisor-架构

Hypervisor 是一种运行在物理服务器和操作系统之间的中间软件层,可允许多个操作系统和应用共享一套基础物理硬件&#xff0c;因此也可以看作是虚拟环境中 的“元”操作系统&#xff0c;它可以协调访问服务器上的所有物理设备和虚拟机&#xff0c;也叫 虚拟机监视器&#xff08;…
阅读更多...
KVM虚拟化技术学习-基础入门

KVM虚拟化技术学习-基础入门

1.虚拟化技术概述 虚拟化[Virtualization]技术最早出现在 20 世纪 60 年代的 IBM ⼤型机系统&#xff0c;在70年代的 System 370 系列中逐渐流⾏起来&#xff0c;这些机器通过⼀种叫虚拟机监控器[Virtual Machine Monitor&#xff0c;VMM]的程序 在物理硬件之上⽣成许多可以运⾏…
阅读更多...
KVM虚拟化技术学习-KVM管理

KVM虚拟化技术学习-KVM管理

二&#xff0c;KVM管理 1.升级配置 1.创建一个空磁盘卷 [rootlocalhost ~]# qemu-img create -f qcow2 /kvm/images/disk2.qcow2 5G Formatting disk2.qcow2, fmtqcow2 size5368709120 encryptionoff cluster_size65536 lazy_refcountsoff 2.修改配置文件 <disk typefi…
阅读更多...
KVM虚拟化技术原理简介

KVM虚拟化技术原理简介

KVM KVM架构概述KVM运行时的三种模式KVM工作原理 硬件虚拟化技术1、CPU虚拟化2、内存虚拟化3、I/O虚拟化 KVM虚拟化平台部署1.虚拟机资源2.安装KVM3.设置KVM网络4.KVM部署与管理 KVM架构概述 KVM架构很简单&#xff0c;就是内核的一个模块KVM是集成到内核的hypervisorI&#x…
阅读更多...
KVM虚拟化技术实践

KVM虚拟化技术实践

[版权申明&#xff1a;本文系作者原创&#xff0c;转载请注明出处] 文章出处&#xff1a;http://blog.csdn.net/sdksdk0/article/details/54809159 作者&#xff1a;朱培 ID&#xff1a;sdksdk0 今天分享的文章是关于云计算中的kvm&#xff08;虚拟化技术&#xff09;&…
阅读更多...
推荐文章

Copyright @ 2022~2023