uniapp打包H5,小程序问题解决,搭建本地服务器跑h5页面

uniapp打包H5,小程序问题解决,搭建本地服务器跑h5页面

1.打包h5

运行–H5手机版
在这里插入图片描述
域名填写上线时网站域名,标题填写网页标题
在这里插入图片描述

运行路径为服务器自定义文件,不带域名,从根目录开始
在这里插入图片描述
打包成功如下图
在这里插入图片描述
打包成功后找到下图的static和index.html
在这里插入图片描述

  • 搭建本地服务器测试打包好的H5代码
    node.js搭建本地服务器
const express=require('express')
const app=express()
app.use(express.static('./dist'))
app.listen(80,()=>{
  console.log('server runinig at http://127.0.0.1'); 
})
将static和index.html复制到dist文件夹里
浏览器打开http://127.0.0.1
  • H5网页图标设置
    打开index.html文件,在title标签后添加如下代码
<link rel="icon" href="./logoicon.png"> 

2.打包小程序

  • appid配置

在这里插入图片描述

  • 微信开发者工具路径配置
    点击运行-运行到小程序模拟器-运行设置,填写微信开发者工具路径(微信发者工具路径设置settings.json运行设置(微信开发者工具右键–属性–复制路径))在这里插入图片描述

  • 运行-运行到小程序模拟器-微信开发者工具
    在这里插入图片描述

  • 运行到微信小程序失败问题
    1.appid配置有问题
    2.微信开发者工具路径有误
    3.无法打开问题:到微信开发者工具—设置–安全—开启端口
    在这里插入图片描述

  • 小程序打包上传问题
    如果不分包,控制在2M以内,控制图片大小

  • 接口调用问题
    登录微信公众号平台–开发–配置合法域名(必须是https,有端口号需带端口号)

  • 2
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
当使用Uniapp打包H5之后,页面样式丢失可能是由于以下原因导致的: 1. 缺少引入样式文件:在页面中使用了一些自定义样式或第三方样式库,但是没有在页面对应的引入样式文件,导致样式无法生效。可以检查代码中是否正确引入了所需的样式文件。 2. 样式文件路径错误:样式文件的路径是相对于页面的,如果路径设置错误,就会导致样式无法正确加载。需要确认样式文件的路径是否正确,并且在代码中指定了正确的路径。 3. 样式文件加载失败:可能是由于网络问题或路径错误等原因导致样式文件无法加载成功,建议使用开发者工具查看网络请求是否正常,如果请求失败可以检查路径和网络设置。 4. 样式冲突或覆盖:当页面中存在样式冲突或者样式覆盖时,可能会导致页面样式部分丢失。可以使用开发者工具中的元素面板查看元素的样式,并检查是否存在样式冲突或者样式被覆盖的情况。 5. 浏览器兼容性问题:不同的浏览器对于某些CSS属性或特性的支持程度不同,可能会导致页面在某些浏览器中样式丢失。建议使用一些浏览器兼容性工具或者查看官方文档,确认所使用的CSS属性在目标浏览器中是否支持。 在调试过程中,可以通过查看控制台输出的错误信息、检查样式文件的引入和路径、查看网络请求和使用开发者工具等方法来定位和解决页面样式丢失的问题
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值