微信小程序vue3,微信小程序怎么开通

http://www.itjxue.com  2023-01-21 21:19  来源:未知  点击次数: 

小程序:使用Vant Weapp

Vant 是 有赞前端团队 开源的移动端组件库,于 2017 年开源,已持续维护 4 年时间。Vant 对内承载了有赞所有核心业务,对外服务十多万开发者,是业界主流的移动端组件库之一。

目前 Vant 官方提供了 Vue 2 版本 、 Vue 3 版本 和 微信小程序版本 ,并由社区团队维护 React 版本 和 支付宝小程序版本 。

点击开发者工具中的菜单栏:工具 -- 构建 npm

微信小程序就是 Vue 吗

微信小程序和vue框架有点类似,但是差别还是很大,比如微信小程序绑定语法千篇一律{{data}},但是vue的只是在text里面能这样用,属性要用 v-bind,还能支持模版

Vant前端框架

Vant 轻量、可靠的移动端 Vue 组件库

Vant 是一个 轻量 、 可靠的移动端组件库 ,于 2017 年开源。

目前 Vant 官方提供了 Vue 2 版本、Vue 3 版本和微信小程序版本,并由社区团队维护 React 版本和支付宝小程序版本。

文档:V2开发手册:

特性:

通过 npm 安装 .在现有项目中使用 Vant 时,可以通过 npm 或 yarn 进行安装:

通过 CDN 安装 .使用 Vant 最简单的方法是直接在 html 文件中引入 CDN 链接,之后你可以通过全局变量 vant 访问到所有组件。

通过 脚手架安装 .在新项目中使用 Vant 时,推荐使用 Vue 官方提供的脚手架 Vue Cli 创建项目并安装 Vant。

Vue脚手架(创建、了解结构、运行流程),不清楚vue怎么创建请点击

打开 Dos命令窗口 ,使用下面命令创建Vue

添加安装Vant支持

项目创建完毕后,并不直接支持vant,我们需要将Vant的内容添加安装到当前Vue项目

添加引用

启动项目的命令

Vant 支持多种组件注册方式,请根据实际业务需要进行选择。

全局注册后,你可以在 app 下的任意子组件中使用注册的 Vant 组件。

局部注册后,你可以在当前组件中使用注册的 Vant 组件。

Vant 中的许多组件提供了实例方法,调用实例方法时,我们需要通过 ref 来注册组件引用信息,引用信息将会注册在父组件的 $refs 对象上。注册完成后,我们可以通过 this.$refs.xxx 访问到对应的组件实例,并调用上面的实例方法。

Vant 默认使用 px 作为样式单位,如果需要使用 viewport 单位 (vw, vh, vmin, vmax),推荐使用 postcss-px-to-viewport 进行转换。

postcss-px-to-viewport 是一款 PostCSS 插件,用于将 px 单位转化为 vw/vh 单位。

下面提供了一份基本的 PostCSS 示例配置,可以在此配置的基础上根据项目需求进行修改。

表单组件

使用表单组件实现登录页面,是Vant直接提供的组件

向vue文件中复制文档中提供的代码

注意复制的位置,我们以AboutView.vue为例

然后直接访问about页面即可

area省市区选择

我们在手机app上经常需要选择省市区

Vant直接提供了这个组件

我们创建AreaView.vue文件

别忘了要设置路由才能访问这个页面

router文件夹下的index.js文件中添加路由代码

然后可以通过输入路径

localhost:8080/area访问这个页面

但是我们现在只能访问我们数组中定义的少数省市区

怎么才能想文档中显示所有省市区呢

需要引用官方提供的一个地址列表

这样就安装了所有省市区的数据到当前的项目

我们只需要修改js代码,让arealist引用这个数据内容即可

商品列表页

我们在开发酷鲨商城的过程中

移动端需要很多页面,商品列表页面是比较常见的页面之一

我们以商品列表页为例

带领大家开发一个页面

创建页面和路由配置

router/index.js添加路由信息

创建ListView.vue

添加事件调用的参考代码

uni-app 项目小程序端支持 vue3 介绍

随着 vue3 的发布, uni-app 也逐步支持 vue3 。

目前小程序平台已支持,h5、App 平台暂不支持。

除支持 vue3 语法特性外, uni-app 特有的生命周期钩子支持 Composition API ,如 onLaunch , onShow , onLoad …

下面介绍创建支持 vue3 的 uni-app 项目的流程,以及使用中的一些注意事项。vue3 相关问题请关注vue官方文档 vue3 中文文档。

目前仅支持 cli 方式创建支持 vue3 默认模板项目。

如果你之前没有使用过 vue-cli 方式创建过项目,需要先安装 vue-cli ,若已安装则跳过步骤 1。

步骤 1: 全局安装vue-cli

步骤 2: 用如下的命令创建vue3工程

步骤 3: 创建好工程后,进入对应目录

步骤 4: 将项目跑到微信平台

需要将编译后的文件 dist/dev/mp-weixin 导入微信开发者工具运行,也可将项目拖入 HbuildX 中运行,方便运行到各个平台。

欢迎开发者反馈使用该版本遇到的问题,我们将积极收集意见。

后续:

DCloud之所以不支持vue3的h5和app版,主要是因为vue3的组件中很多语法的写法发生变化,这导致uni-app的h5版基础组件库和app版基础组件库的写法与vue3不兼容。

当然除了基础组件,插件市场的所有插件(包括uni ui),都不支持vue3。即便是uni-app已经推出的vue3的小程序版,也不支持插件市场的插件。

考虑到生态兼容的重要性,vue官方(尤雨溪)计划2021年4月中下旬推出新版,对vue2的语法做兼容,届时uni-app的h5版和app版将同时推出,并且插件市场的众多插件也将自动适配vue3版的uni-app。

H5跳转微信小程序

Tips:

Tips:

1、vue2中

2、vue3中,有vue.config.js 的 非vite 项目

3、vue3中,有 vite.config.js 的 vite 项目

4、让后台配合给一个接口,获取微信的config参数

比如node 后台 可参照 node 获取微信签名并使用jssdk

其它语言的随便搜搜都有~

Tips

5、使用开放标签

vue2 中

vue3 中

Tips

由于短信引流成本低,很多公司都使用这样的方式去吸引流量,核心是获取URL Scheme

可查阅 微信官方文档

太长不想看?

核心几点如下:

Tips

如果你这个模板只服务一个短信链接,完全可以写死跳转的url,但是你想搞成通用的,可以像我上面这样封装下,根据类型去不同的小程序。然后URL Scheme也可以向后台实时获取新的,确保这个中间页的链接是有效的。

由于不再支持永久有效,IOS也走中间页,在中间页动态获取有效的URL Scheme实现跳转

缺点:

这样后台要开发接口配合你来获取该链接,且你的h5地址如果很长,最好能生成短链,这样放在短信中不至于太长。

无公众号直接使用小程序身份开发网页并免鉴权跳转小程序?可以吗?

可以参考 官方文档

(责任编辑:IT教学网)

更多

推荐杀毒防毒文章