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,一经查实,立即删除!

相关文章

怎么学习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层。用…

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

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

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

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

安全头响应头(三)​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…

轻量级自动化测试框架WebZ

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

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 以后就不用买了

深入源码分析kubernetes informer机制(四)DeltaFIFO

[阅读指南] 这是该系列第四篇 基于kubernetes 1.27 stage版本 为了方便阅读,后续所有代码均省略了错误处理及与关注逻辑无关的部分。 文章目录 client-go中的存储结构DeltaFIFOdelta索引 keyqueue push操作delta push 去重 queue pop操作 总结 client-go中的存储结构…

设计模式

本文主要介绍设计模式的主要设计原则和常用设计模式。 一、UML画图 1.类图 2.时序图 二、设计模式原则 1.单一职责原则 就是一个方法、一个类只做一件事; 2.开闭原则 就是软件的设计应该对拓展开放,对修改关闭,这在java中体现最明显的就…

Docker本地镜像发布到阿里云

1. 本地镜像发布到阿里云 2. 镜像的生成方法 OPTIONS说明: -a :提交的镜像作者; -m :提交时的说明文字; 本次案例centosubuntu两个,当堂讲解一个,家庭作业一个,请大家务必动手,亲自实操。 docke…

Gradio部署应用到服务器不能正常访问

用Gradio部署一个基于ChatGLM-6B的应用,发布到团队的服务器上(局域网,公网不能访问),我将gradio应用发布到服务器的9001端口 import gradio as gr with gr.Blocks() as demo:......demo.queue().launch(server_port90…

ad+硬件每日学习十个知识点(34)23.8.14 (DCDC详细设计,续流二极管的选择,COMP引脚的环路设计)

文章目录 1.二极管的rrm电压和rms电压有什么不同2.DCDC续流二极管的选择3.充电电容4.COMP引脚的环路设计5.DCDC设计总结6.多路并联7.相位匹配8.工作模式9.低温输出偏离10.电源负载与效率11.降压升压模块 1.二极管的rrm电压和rms电压有什么不同 答: 二极管的 RRM &a…

redis主从复制、哨兵服务、持久化、数据类型

Top NSD DBA DAY10 案例1:配置主从复制案例2:配置带验证的主从复制案例3:哨兵服务案例4:使用RDB文件恢复数据案例5:AOF案例6:字符类型案例7:列表类型案例8:散列类型案例9&#xff…

Linux交叉编译opencv并移植ARM端

Linux交叉编译opencv并移植ARM端 - 知乎 一、安装交叉编译器 目标平台为arm7l,此为32位ARM架构,要安装合适的编译器 sudo apt install arm-linux-gnueabihf-gcc sudo apt install arm-linux-gnueabihf-g注意:64位ARM架构的编译器与32位ARM架…

【MyBatis】查询数据库

目录 一、什么是MyBatis 二、MyBatis框架的搭建 1、搭建MyBatis框架 2、设置MyBaits项目的配置 三、使用MyBatis完成数据库的操作 1、MyBatis程序中sql语句的即时执行和预编译 1.1、即时执行(${}) 1.2、预编译(#{}) 1.3、即…

tomcat设置PermSize

最近tomcat老是报错,查看了日志出现PermGen 内存不够用,重启tomcat后查询使用情况 通过启动参数发现没有设置 PermGen,继续通过jmap查看 jmap -heap 21179 发现99%已使用,而且默认是30.5M,太小了,这里设置成256M 1. 创建setenv.sh文件 在/usr/local/tomcat/bin目录下创建一个…