day17-Trae开发微信小程序04

今日内容

0 后端项目

# 1 使用Trae开发完了---》运行起来了
# 2 如果没运行，或者关机了，开机后需要重新运行后端，才能在浏览器中访问
	-需要先进入到 【后端项目的目录下】
    -cd .\change_face_api\
    -python .\manage.py runserver 0.0.0.0:8000  # 运行后端项目，跑在8000端口
# 3 浏览器访问后端项目
	-http://127.0.0.1:8000/admin/         # 看到界面--》表示后端启动了
    -先了解：需要知道你机器ip地址：192.168.10.104
    	-http://192.168.10.104:8000/admin/ # 看到错误--》表示后端启动了
                
                
                
# 4 进入到系统中查看用户，换脸。。。记录
	-账号：lqz  密码：123456  # 我强行改了数据库，你们先不用关注
    
    
# 5 用户有两种
	-一种：微信小程序注册的用户：         饿了么app注册了账号上不能进入饿了么后台修改优惠券的
    -一种：后台管理员：运营人员用的账号 
    ---------他们不互通---小程序端的用户是无法登录到后台管理-----------
	-使用 账号：lqz  密码：123456 登录到后台管理--》我给你们的程序【你们的不一样】
# 6 后端开发完成了

image-20260430200851780

image-20260430201021099

image-20260430201109489

image-20260430201245239

image-20260430201903952

1 小程序概述

1.1 注册小程序账号

# 1 访问【微信公众平台】，注册一个微信小程序账号
	-https://mp.weixin.qq.com/
# 2 申请账号需要准备一个邮箱，该邮箱要求：
    -未被微信公众平台注册
    -未被微信开放平台注册
    -未被个人微信号绑定过
    -如果被绑定了需要解绑 或 使用其他邮箱
    
# 3 注册过程中需要微信扫码-->绑定你个人微信--》后续用微信扫码登录

image-20240401162948430

image-20240401163023686

image-20240401163050951

image-20240401163142613

image-20240401163812295

image-20240401163835864

image-20240401163920407

1.2 小程序配置信息

# 1 注册成功后，需要打开微信公众平台对小程序账号进行一些设置
	-小程序后续需要 提交审核和上线--》提交审核时，小程序账号信息是必填项
	-名称、图标、类目等
    -小程序备案和微信认证-->个人可以
    	-需要时间---》工信部审核--》需要提什么材料，就提什么材料
        -只要备案过的小程序，才能在微信小程序中搜到
        -如果没备案--》只能最多20个人使用，并且微信小程序中搜不到

image-20260430202415601

1.3 小程序开发流程

# 1 开发微信小程序，需要使用：微信开发者工具 软件--》微信提供的，我们下载安装即可
	-正统的流程：企业，公司中这么做
    
# 2 我们使用AI编辑器：Trae来写代码，不是程序员写的代码

# 3 我们的具体步骤：
	1 下载微信开发者工具 并安装
    2 创建一个空的微信小程序项目
    3 使用Trae在空项目的基础上，继续开发
    
# 4 拓展一句：Trae能开发已经存在的项目吗？
	1 Django的后端---》纯用Trae开发的，从开始创建项目，就是让Trae创建的
    	-纯由AI编辑器做的
    2 微信小程序--》开始创建项目是我们先创建好了，再让Trae开发
    	-我们先造出来了，让Trae在上面继续优化
        -我们这个就是 【已经存在的项目】
        	-只是我们现在微信小程序的代码量少
            -后续你用别的项目，让AI编辑器继续加入别的功能，只是代码量多一些
# 5 微信小程序开发流程：看下图

image-20260430203749478

1.4 小程序成员

# 1 开发者：我们
# 2 运营成员：看小程序的数据：用户访问量，使用时间。。。
# 3 体验成员：用户
	- 你的朋友们
    -微信小程序，如果没有上架：每次同时只能有15个体验者
    -微信小程序上架后，所有用户都可以使用
    	-国家工信部审核，周期比较长，需要提交很多资料
        -ai类的，国家审核非常严格，一般以企业形式申请比较好通过

1.5 创建微信小程序项目

# 1 下载微信开发者工具
https://developers.weixin.qq.com/miniprogram/dev/devtools/download.html
    
# 2 一路下一步安装

# 3 双击打开
# 4 登录
# 5 创建项目

image-20260430204719963

image-20260430204855770

image-20260430204938784

image-20260430205019058

image-20260430205240309

image-20260430205339131

image-20260430205844005

2 小程序项目目录

# 1 项目主配置文件
	项目主配置文件必须放到项目的根目录下，控制整个项目
    	- app.js：  小程序入口文件
    	- app.json：小程序的全局配置文件
    	- app.wxss：小程序的全局样式
    	- app.js 和 app.json 文件是必须的，不能没有
       
# 2 页面文件：如下表示微信小程序有三个页面：index首页，home页面，main页面
	pages文件夹
    	index文件夹
            -xx.js：  页面逻辑  js代码存放位置
            -xx.wxml：页面结构  类html文件存放位置
            -xx.wxss：页面样式  css存放位置
            -xx.json：小页面配置 
            -xx.js 文件和 xx.wxml 文件是必须的，不能没有
        	
        home文件夹
        	-home.js：  页面逻辑  js代码存放位置
            -home.wxml：页面结构  类html文件存放位置
            -home.wxss：页面样式  css存放位置
            -home.json：小页面配置 
        main文件夹
        	-main.js：  页面逻辑  js代码存放位置
            -main.wxml：页面结构  类html文件存放位置
            -main.wxss：页面样式  css存放位置
            -main.json：小页面配置 
            
 # 3 不要动，项目配置文件
    project.config.json
    project.private.config.json
    sitemap.json

2.1 纯净项目【你们想做就做，不想做就不做】

# 1 使用微信开发者工具创建的项目--》默认带了一个页面
# 2 我们可以把这个项目我们不用的东西，都删除
	-
    
# 3 你们可以留着，让Trae去修改或删除

# 4 最终样子
	pages文件夹下：
    	index 文件夹
        	index.js:   #只有  
                Page({})
            index.json  #只有
                   {
                      "usingComponents": {
                      }
                    }
            index.wxml #只有
                <view class="container">
                    LiuQingzheng
                </view>
           index.wxss  # 空的
   app.js
		App({})
   app.json # 没动
   app.wxss # 空的
   #下面 没动
   project.config.json
   project.private.config.json
   sitemap.json

2.2 支持本地http

# 1 微信小程序默认不允许访问本地的http
# 2 目前我们在本地开发，后端django 是http的
# 3 在小程序端开启允许：本地的http

image-20260430211551700

image-20260430214924896

3 Trae开发微信小程序

根据项目需求： 和项目小程序架构文档： 和UI设计图:  生成智能换脸小程序端代码
要求：
1.我已经创建了小程序： ，你在这个基础上继续编写，无效的文件和文件夹帮我删除。
2.根据需求帮编写完小程序端代码。
3.接口参考后端项目： ，注意接口返回格式，并正常测试通过，前后端调通。
4.后端链接地址为：http://127.0.0.1:8000。
5.小程序不使用Skyline 渲染模式。
6.小程序用户未登录，显示登录页面，登录成功进入首页。
7.首页，历史，个人中心底部使用tabbar切换。

4 前后端联调

4.1 使用Trae修复错误

# 1 保证后端项目在运行
# 2 在微信开发者工具中，运行使用Trae开发的微信小程序
# 3 有的同学，运行直接报错，出不来界面：console中红色的
	-提示词模板： 微信小程序端报错：错误贴过来
    
# 4 console中没有红色，就表示没有错误了，就能看到页面了
------------------有页面了，能正常运行，有点红，可以先忽略--------------------

# 5 一个一个功能的测试——注册开始测试
	-点开network
    -页面中输入测试数据

image-20260430213617260

image-20260430213814398

# 这个报错：
api.js:24  http://127.0.0.1:8000 不在以下 request 合法域名列表中，请参考文档：https://developers.weixin.qq.com/miniprogram/dev/framework/ability/network.html(env: Windows,mp,2.01.2510280; lib: 3.15.2)
posted @ 2026-05-04 19:53  凫弥  阅读(4)  评论(0)    收藏  举报