Taro 3.x 实现的微信小程序(婚礼邀请函)

930 阅读3分钟

祝福用语

嘿嘿,给大家偷偷找的,😏😏😏😏😏😏

1.最有生活味的朋友结婚贺词——“希望你幸福地上缴工资,爽快地交出存折密码,藏好初恋的情书,迎接一个全新的生活!”俨然是新好男人的婚后守则。

2.最意味深长的结婚贺词——交警工作多年的朋友,出于职业习惯写出的朋友结婚贺词就是简单的八个字:新手上路,小心驾驶!此言一出,笑翻全场,让人“回味悠长”。

3.最语重心长的结婚贺词——大哥以过来人的身份忠告老弟,在历史的长河中,我们学会了坚定不移,有些事一定要主动交待,有些事“打死也不能说”。

4.在你们喜结良缘的日子,祝你新婚快乐!让好运与福气结交,让财源与吉祥结伴,让美梦与健康结对,让问候与祝福结缘。祝福一对新人真心相爱,美满幸福,相约永久!

5.幸福,是洁白的婚纱的在风中跳舞;幸福,是灿烂的笑容在脸上驻足;幸福,是执子之手与子偕老的道路;幸福,是今天一起迈向甜蜜的脚步。祝福百年好合,永结同心!

项目地址

项目地址: git地址

项目安装

1.安装 tarojs/cli

# 使用 npm 安装 CLI
$ npm install -g @tarojs/cli
# OR 使用 yarn 安装 CLI
$ yarn global add @tarojs/cli
# OR 安装了 cnpm,使用 cnpm 安装 CLI
$ cnpm install -g @tarojs/cli

2.创建模板

$ taro init myApp

功能简绍

技术点: react + context + hook + wcloud + sass + taro-ui

功能: 分包,接入微信wxml组件,canvas, Swiper,vudio,云开发,云数据库,评论弹幕,列表, image延时封装, 同意loadding效果封装, Atfab封装, curtain封装等

页面

1.登录: 使用(getUserProfile,callFunction:记录登录的user 信息)
2.邀请函:图片轮播(Swiper),音乐(createInnerAudioContext)
3.导航: (getLocation,openLocation),map等
4.领奖台:canvas烟花效果,callFunction:获取是否中奖信息等
5.相册/相册详情: image, ScrollView等 6.祝福:评论弹幕(barrage),callFunction:获取弹幕信息,ScrollView等

项目启动

1.注册账号和下载微信开发者工具
2.拉取上面github地址的代码,修改成自己的appid

image.png

3.cloud ==> function 下面的4个云函数分别安装好依赖(client 安装依赖哦) image.png 然后再微信小程序开发者工具进行上传或者本地调试

image.png
5.npm run dev:weapp (本地热更新)

项目展示

image.png

image.png

image.png

image.png

image.png

image.png

记录问题

1.taro cli是3.0.0+, 使用taro-ui必须要3.x.x 也上的
2.taro分包,用npm run dev:weapp,在模拟器能显示,真机显示空白页面
npm run build:weapp, 报错 ’Please do not register multiple Pages in pages/albumDetailTemplate/comp.js‘. 分包==> 分为2种,独立分包和普通分包,区别在于 "independent": true 为独立分包
3.previewImage 预览图片,背景音乐关闭(微信官方暂未解决)
4.canvas 接入H5烟花canvas修改(大致一样),需注意canvas的宽高 canvas._width, canvas_height 应该是canvas.width, canvas.height
5.入了一个坑,引入h5 烟花的时候,上面的宽度是 window.innerWidth,在模拟器上面的是没得问题的,手机上window 没有这个熟悉。 使用getSystemInfoSync 获取设备宽高
6.taro 3.4.2 useDidHide在分包 然后返回上一级页面,没有生效