UED小程序项目记录Day02
本文最后更新于368 天前,其中的信息可能已经过时,如有错误请发送邮件到1986413837@qq.com

1.这个图片格式转化烦的很……

(1)先下载一下UI那边的切图

(2)把切图名字改一下 都改成有意义的英文名字最好!

(3)统一把png格式图片转为jpg格式

(4)拖到相应的图片目录下 (static/images or common/images)

2.关于在uni-app中打开微信开发者工具后编辑代码保存后微信开发者工具不刷新页面的问题

微信开发者里的设置->编辑器->文件保存,有两个选项,修改文件时自动保存和保存时自动编辑小程序,这两个一起打开就不会给你重新渲染,应该是跟HBuilder X冲突了导致的,把修改文件时自动保存关了就行了!

3.微信小程序span标签失效 还是多用 view吧

4.给的UI图背景都是有白色的部分 –> 可以使用CSS中mix-blend-mode : multiply 属性进行颜色的均和

5.微信小程序端只支持网络字体字体链接必须是https App支持网络或本地的字体

这东西也挺烦的 还是在阿里巴巴的网站上搞比较舒服 直接赋值@font-face代码就可以了

可以自定义font-family的名字 在要用字体的地方直接font-family:” ” 即可

6.文字显示在一行 多余文字隐藏并加上…… —> 三部曲即可

white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;

7.想给文字添加颜色渐变效果

设置背景渐变 文字颜色透明 再裁剪背景到只剩下text

但是微信小程序不支持background-clip属性

需要使用-webkit-background-clip: text;

8.设置空心卡片边框颜色渐变

比较烦人这个东西

这样处理效果不错

.border {
            width: 300px;
            height: 300px;
            border-radius: 20px;
            margin: auto;
            box-sizing: border-box;
            border: 1px solid transparent;
            background-image: linear-gradient(#fff, #fff),
                linear-gradient(to bottom left,
                    rgba(255, 216, 64, 1),
                    rgba(243, 172, 255, 1),
                    rgba(138, 236, 255, 1));
            background-origin: border-box;
            background-clip: content-box, border-box;
            border-radius: 20px;
        }

9.自定义tabBar遮挡住部分内容(手机屏幕较短时 如iPhone6/7/8)解决

底部加上<view style=”width: 100%;height: calc(100rpx + env(safe-area-inset-bottom) / 2);”></view>

自定义获取高度填充

这么做基本适应大多数情况了 但是会出现空白部分 所以应该还要去找下通解方法

10.用Uniapp自带的组件也是很舒服了 用的时候看好了是哪个项目用 老给壁纸项目用了

11.页面跳转两个思路

(1)navigator标签实现

(2)API实现 如uni.navigateTo( { url: …… } )

Life's a struggle, I'll conquer it.
暂无评论

发送评论 编辑评论


				
|´・ω・)ノ
ヾ(≧∇≦*)ゝ
(☆ω☆)
(╯‵□′)╯︵┴─┴
 ̄﹃ ̄
(/ω\)
∠( ᐛ 」∠)_
(๑•̀ㅁ•́ฅ)
→_→
୧(๑•̀⌄•́๑)૭
٩(ˊᗜˋ*)و
(ノ°ο°)ノ
(´இ皿இ`)
⌇●﹏●⌇
(ฅ´ω`ฅ)
(╯°A°)╯︵○○○
φ( ̄∇ ̄o)
ヾ(´・ ・`。)ノ"
( ง ᵒ̌皿ᵒ̌)ง⁼³₌₃
(ó﹏ò。)
Σ(っ °Д °;)っ
( ,,´・ω・)ノ"(´っω・`。)
╮(╯▽╰)╭
o(*////▽////*)q
>﹏<
( ๑´•ω•) "(ㆆᴗㆆ)
😂
😀
😅
😊
🙂
🙃
😌
😍
😘
😜
😝
😏
😒
🙄
😳
😡
😔
😫
😱
😭
💩
👻
🙌
🖕
👍
👫
👬
👭
🌚
🌝
🙈
💊
😶
🙏
🍦
🍉
😣
Source: github.com/k4yt3x/flowerhd
颜文字
Emoji
小恐龙
花!
上一篇
下一篇