uniapp-微信小程序篇

这篇具有很好参考价值的文章主要介绍了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 创建
uniapp-微信小程序篇,uniapp,微信小程序,uni-app,微信小程序,小程序
通过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连接微信开发者工具进行页面调试。
uniapp-微信小程序篇,uniapp,微信小程序,uni-app,微信小程序,小程序
找到设置下面的代理设置- 设置为使用系统代理
uniapp-微信小程序篇,uniapp,微信小程序,uni-app,微信小程序,小程序
准备好这些就可以开始开发了。

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

下面是目录结构:
uniapp-微信小程序篇,uniapp,微信小程序,uni-app,微信小程序,小程序
对应的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"
			},
		]
}

六、发版
这里注意一个问题、就是开发完成需要发版的时候、一定要在微信公众平台进行服务器域名配置、否则将无法与你的后端服务进行通信。
uniapp-微信小程序篇,uniapp,微信小程序,uni-app,微信小程序,小程序
uniapp-微信小程序篇,uniapp,微信小程序,uni-app,微信小程序,小程序
uniapp-微信小程序篇,uniapp,微信小程序,uni-app,微信小程序,小程序
在此处将你们的后端服务地址配置上(注意还必须是https),没有配置https的可以自行去你们的服务器(阿里云、腾讯云)申请就好了。文章来源地址https://www.toymoban.com/news/detail-651358.html

到了这里,关于uniapp-微信小程序篇的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • 微信小程序uni-app

    小程序 是一种不需要下载、安装即可使用的应用,它实现了应用触手可及的梦想,用户扫一扫或者搜一下就能打开应用,也实现了用完即走的理念,用户不用安装太多应用,应用随处可用,但又无须安装卸载。 微信开发文档 1、工作原理 网页开发,渲染线程和脚本是互斥的

    2024年02月10日
    浏览(119)
  • 微信小程序授权(uni-app)

    概述 为了避免重复开发,自己封装了一个通用用户授权回调方法,只需要传入需要授权的scope,权限中文描述、回调函数,就可以实现一整套小程序是否授权、打开授权设置,调用后续操作函数的工作 功能 可以根据自己的实际应用进行微调 目前使用的uni-app版本,可以根据自

    2024年02月16日
    浏览(81)
  • 语法速通 uni-app随笔【uni-app】【微信小程序】【vue】

    其中, pages 目录/ index 目录【必有】: index.js 编写业务逻辑 【初始数据,生命周期函数】 index.json 编写配置 index.wxml 编写模板 【可理解为本页html】 index.wxss 【可理解为本页css】 直接输入敲回车,连尖括号都不需要就可以标签补全 1)初始数据写死 在 index.wxml 引入变

    2024年02月12日
    浏览(165)
  • uni-app 微信小程序 激励视频广告

    封装激励视频-Ad.js 调用上面写的方法:

    2024年02月12日
    浏览(77)
  • uni-app微信小程序使用echarts

    前言:本来是使用的ucharts,但因为无法监听图例点击交互,满足不了需求,所以只能放弃。 首先,下载echart组件。可以先随便建个文件夹,然后 npm init。接着下载依赖 然后找到 node_modulesmpvue-echarts下的文件,如图 只留下src,其他的删掉(没有用到)。然后复制 mpvue-echart

    2024年02月10日
    浏览(69)
  • 【uni-app微信小程序】实现支付功能

    实现微信支付功能需要在小程序后台配置支付相关信息,并且在前端代码中调用微信支付API进行支付操作。好的, uni-app微信小程序实现支付功能整体流程 大致如下: 注册微信公众平台,并完成开发者资质认证; 在微信商户平台注册商户账号,并完成商户资质认证; 在商户

    2024年02月13日
    浏览(95)
  • uni-app(微信小程序)获取当前位置uni.getLocation

     1、微信公众平台  开发  开发管理   2、开通之后到项目文件    3、下载腾讯地图插件并引入到文件中    

    2024年02月11日
    浏览(62)
  • 微信小程序转uni-app注意事项

            如果你手头上有一套微信小程序的代码,怎样把它变成一个网页版或者app版本的呢?我推荐你使用uni-app。         使用uni-app可以很方便的将微信小程序代码翻译成uni-app项目,通过uni-app项目又可以编译成h5、app或微信小程序版本。这样一来,写一份代码同时可以

    2024年02月04日
    浏览(57)
  • 微信小程序修改原生组件样式(uni-app)

    微信小程序修改原生组件样式 全局修改,直接将修改的样式写在全局的样式文件中; 特殊情况:修改swiper指示点样式时,需要包裹在swiper的样式选择器下才生效。 直接将下列代码放在全局样式中是不会生效的,需要加上swiper组件的元素选择器或swiper组件的其他样式名也可。

    2024年02月05日
    浏览(72)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包