微信小程序h5打包 第1篇
1、注册小程序
登录微信公众平台,注册一个小程序,不懂自行百度,注册完成后,在开发-开发管理-开发设置中获取AppID(小程序ID)
2、创建小程序
3、修改配置文件
打开文件,pages项只保留 _pages/index/index_ 这一行即可
window项的navigationBarTitleText填写小程序名称
4、修改页面文件
打开/pages/index/文件,将里面的代码全部删除,添加下面代码(域名改成你自己的):
5、测试小程序
微信小程序h5打包 第2篇
代码里的https://....就是你H5网站的网址
小程序正式上线的话,需要在微信小程序管理中心中,把H5域名添加为业务域名,如下图:
登录微信公众平台 → 开发管理 → 开发设置 → 业务域名:
mpvue:基于 的小程序开发框架,支持将 项目转换为小程序项目,包括 H5 页 面。
借鉴大佬文章:
Taro:一款多端统一开发框架,支持将 项目转换为小程序项目,包括 H5 页面。
借鉴大佬文章:
uni-app:一款基于 的跨平台开发框架,支持将 项目转换为小程序项目,包括 H5 页面。
微信小程序h5打包 第3篇
这是h5页面的打包配置,新版本的HBuilder用的是web配置(也就是h5配置的意思) 由于上图是我个人项目练习,没有用到appID,所以后面的图就截取我跟着学习的视频了。
然后我们再看HBuilder的导航栏中的 “发行” ,发行“——>PC Web或手机H5(仅适用于uni-app)”。
unpackage->dist->build->h5(右键选择在外部打开)
把h5文件夹拉到项目中去,放在服务器中去,给他一个域名,就直接能看了。
微信小程序h5打包 第4篇
在H5上,u–input的样式是可以完美展示的,但是到了微信小程序上,样式完全失效了。经过一番摸索,找到了最终的解决方法。
把样式失效的 u–input 改成 u-input。
在u-input的自定义样式之前添加默认样式的class名,u-input__content,而且要使用深度渲染,写成::
。这样H5中的样式就可以完全应用到微信小程序上了(前后插槽的样式也完美应用),示例代码如下。
补充:组件的默认样式的class名如何获取。