uniapp-微信小程序篇

uniapp-微信小程序篇

一、创建项目(以Vue3+TS 项目为示例)
可以通过命令行的方式创建也可以通过HBuilderX进行创建(通过HBuilderX创建的项目建议选择最简单的模板),个人建议使用命令行方式。
(1) 命令行方式:

npx degit dcloudio/uni-preset-vue#vite-ts my-vue3-project

如下载失败:可以直接去gitee官网下载

https://gitee.com/dcloud/uni-preset-vue/repository/archive/vite-ts.zip

(2) HBuilderX 创建
在这里插入图片描述
通过HBuilderX没有默认的Vue3+Ts模板 所以我建议还是使用命令行的方式。

二、配置manifest.json
找到manifest.json文件中的mp-weixin项进行微信小程序基础配置

"mp-weixin" : {"appid" : "xxxx", // 你的微信小程序appId"setting" : {"urlCheck" : false,"minified" : true,"postcss" : true // 支持postcss预处理},"usingComponents" : true, // 使用组件化"optimization" : { // 进行分包"subPackages" : true},"lazyCodeLoading" : "requiredComponents",// 按需加载"permission" : { // 需要申请获取的权限"scope.userLocation" : {"desc" : "获取用户定位"}}
},

三、配置微信开发者工具
我们使用HBuilderX 开发中需要调试、此时因为微信小程序的工具功能都没有、所以我们可以通过HBuilderX连接微信开发者工具进行页面调试。
在这里插入图片描述
找到设置下面的代理设置- 设置为使用系统代理
在这里插入图片描述
准备好这些就可以开始开发了。

四、分包
当我们项目很大的时候微信小程序会有打包大小限制、所以就需要进行分包处理。
下面我做了一个basePackages分包、pages 是主包(默认)。我们可以根据自己业务需求进行功能代码差分、可以分出不同的包、这里只是为了做演示。

下面是目录结构:
在这里插入图片描述
对应的pages.json内容为:

{"pages": [{"path": "pages/login/index","style": {"navigationBarTitleText": "登录"}},{"path": "pages/order/index","style": {"navigationBarTitleText": "订单","enablePullDownRefresh": true // 支持下拉刷新}},],"subPackages": [{"root": "basePackages", // 此处是分包目录名称"pages": [ // 此数组内配置的页面根目录所有都默认为basePackages{"path": "order/modifyInfo/index", // 目录:basePackages/order/modifyInfo/index"style": {"navigationBarTitleText": "修改信息"}},]}],
}

五、注意事项
(1). 微信小程序的taBar 图标不支持字体图标、必须使用图片(否则无效)。
首次开发因为uniapp是支持的、所以使用了字体图标,一直出不来

"tabBar": {"borderStyle": "white", //边框颜色"backgroundColor": "#fff", //背景颜色"color": "#000000", //默认颜色"selectedColor": "#1B5BFF", //选中的颜色"fontSize": "14px", // 字体大小"list": [{"iconPath": "static/orderMenu.png","selectedIconPath": "static/orderMenuActive.png","text": "订单","pagePath": "pages/order/index"},{"iconPath": "static/checkPrice.png","selectedIconPath": "static/checkPriceActive.png","text": "查货","pagePath": "pages/checkPrice/index"},]
}

六、发版
这里注意一个问题、就是开发完成需要发版的时候、一定要在微信公众平台进行服务器域名配置、否则将无法与你的后端服务进行通信。
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在此处将你们的后端服务地址配置上(注意还必须是https),没有配置https的可以自行去你们的服务器(阿里云、腾讯云)申请就好了。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/38982.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

ABAP 期初库存批量导入 demo1

&--------------------------------------------------------------------- *& Report ZMMCP005 &--------------------------------------------------------------------- 作者: Liv完成日期:描述: 期初库存导入需求简要说明&…

uni-app 面容、指纹识别插件(uni-face-login)

面容、指纹识别插件(uni-face-login) 介绍 人脸指纹登录授权,可以使用手机自带的人脸、指纹进行生物识别,进而判断是否机主本人,从而进行授权验证,适配安卓、iOS、鸿蒙设备 猛戳这里去插件市场看看 使用 该插件支持鸿蒙、安卓…

UE4/5C++多线程插件制作(二十一、使用)

目录 DemoPawn.h DemoPawn.cpp 会出现的bug 插件 相关的插件制作在上一节已经完成了。 具体的使用方式在第0章已经写了,get之后去绑定即可。 而后笔者做了一个接口,具体的绑定方式也就在这个接口里面。 接下来最重要的是进行使用,对此我做了一个与蓝图相关的接口,里…

TypeScript教程(一)简介与安装

一、简介 TypeScript 是 JavaScript 的一个超集,扩展了JavaScript的语法,因此现有的JavaScript可与TypeScript一起工作无需修改,支持 ECMAScript 6 标准(ES6 教程)。 语言特性: 1.类型批注和编译时类型检…

怎么学习AJAX相关技术? - 易智编译EaseEditing

学习AJAX(Asynchronous JavaScript and XML)相关技术可以让你实现网页的异步数据交互,提升用户体验。以下是一些学习AJAX技术的步骤和资源: HTML、CSS和JavaScript基础: 首先,确保你已经掌握了基本的HTML…

【Redis】Redis三种集群模式-主从、哨兵、集群各自架构的优点和缺点对比

文章目录 前言1. 单机模式2. 主从架构3. 哨兵4. 集群模式总结 前言 如果Redis的读写请求量很大,那么单个实例很有可能承担不了这么大的请求量,如何提高Redis的性能呢?你也许已经想到了,可以部署多个副本节点,业务采用…

Android系统-进程-Binder1-概述

目录 引言: 一次拷贝 Binder一次通信过程 应用启动中的binder交互 C/S模式: Binder COMMAND BWR数据结构: 引言: Android的binder是从openbinder发展过来的。包括了binder驱动,Native层,Java层。用…

光耦继电器:实现电气隔离的卓越选择

光耦继电器是一种常用的电子元件,用于实现电气隔离和信号传输。在工业控制、自动化系统和电力电子等领域,光耦继电器具有独特的特点和优势。本文将从可靠性、隔离性、响应速度和适应性等方面对光耦继电器的特点进行概述。 光耦继电器是一种典型的固态继电…

Mysql内储存JSON字符串,根据条件进行查询(包含多层级复杂JSON查询)

1.模糊查询json类型字段 存储的数据格式(字段名 people_json): {“name”: “zhangsan”, “age”: “13”, “gender”: “男”} 代码如下(示例): select * from table_name where people_json->$.n…

部署工业物联网可以选择哪些通信方案?

部署工业物联网有诸多意义,诸如提升生产效率,降低管理成本,保障生产品质稳定,应对长期从业劳动力变化趋势等。针对不同行业、场景,工业物联网需要选择不同的通信方案,以达到成本和效益的最佳平衡。本篇就简…

安全头响应头(三)​X-Content-Type-Options

一 X-Content-Type-Options响应头 说明:先写个框架,后续补充 思考:请求类型是 "style" 和 "script" 是什么意思? script标签 style StyleSheet JavaScript MIME type 文件扩展和Content-Type的映射关系 场景: 一个…

Mybatis 源码 ∞ :杂七杂八

文章目录 一、前言二、TypeHandler三、KeyGenerator四、Plugin1 Interceptor2 org.apache.ibatis.plugin.Plugin3. 调用场景 五、Mybatis 嵌套映射 BUG1. 示例2. 原因3. 解决方案 六、discriminator 标签七、其他1. RowBounds2. ResultHandler3. MapKey 一、前言 Mybatis 官网…

mysql主从复制搭建(一主一从)

提示:文章写完后,目录可以自动生成,如何生成可参考右边的帮助文档 文章目录 前言MySQL复制过程分为三部: 一、准备工作二、配置>主库Master三、配置>从库SlaveSlave_IO_Running: YesSlave_SQL_Running: Yes 四、测试至此&am…

8 | 美国航班数据分析

"在现代快节奏的生活中,航空旅行已经成为人们出行的重要方式之一。然而,航班的准时性一直以来都是旅客和航空公司关注的焦点。无论是商务出差还是休闲度假,乘客们都希望能够在既定的时间内安全、准时地到达目的地。而对于航空公司而言,准点运营不仅关乎乘客体验,还涉…

TCP的相关性质

文章目录 流量控制拥塞控制拥塞窗口 延迟应答捎带应答面向字节流粘包问题TCP的异常 流量控制 由于接收端处理数据的速度是有限的,如果发送端发的太快,那么接收端的缓冲区就可能会满。此时如果发送端还发数据,就会出现丢包现象,并…

轻量级自动化测试框架WebZ

一、什么是WebZ WebZ是我用Python写的“关键字驱动”的自动化测试框架,基于WebDriver。 设计该框架的初衷是:用自动化测试让测试人员从一些简单却重复的测试中解放出来。之所以用“关键字驱动”模式是因为我觉得这样能让测试人员(测试执行人员…

【Sklearn】基于线性判别法的数据分类预测(Excel可直接替换数据)

【Sklearn】基于线性判别法的数据分类预测(Excel可直接替换数据) 1.模型原理2.模型参数3.文件结构4.Excel数据5.下载地址6.完整代码7.运行结果1.模型原理 线性判别分析(Linear Discriminant Analysis,简称LDA)是一种经典的模式识别和分类方法,它的目标是找到一个投影,将…

Linux系列讲解 —— FTP协议的应用

简单介绍一下FTP文件传输协议在linux系统中的应用。 目录 0. 基本概念1. FTP Server1.1 安装FTP Server1.2 FTP Server开启和关闭1.3 查看FTP Server是否开启1.4 FTP服务器配置 2. FTP Client2.1 lftp2.2 ftp2.3 sftp2.4 文件资源管理器集成的ftp和sftp 3. ftp常用命令 0. 基本…

IDE的下载和使用

IDE 文章目录 IDEJETBRAIN JETBRAIN 官网下载对应的ide 激活方式 dxm的电脑已经把这个脚本下载下来了,脚本是macjihuo 以后就不用买了

Neo4j之SET基础

在 Neo4j 中,SET 语句用于更新节点或关系的属性。它允许你修改节点或关系的属性值,可以单独使用,也可以与其他查询语句(如 MATCH、CREATE、MERGE 等)一起使用。以下是一些使用 SET 语句的常见例子,以及它们…