小程序-优化，部署，细节功能

最新推荐文章于 2024-09-09 09:20:17 发布

掘金-我是哪吒

最新推荐文章于 2024-09-09 09:20:17 发布

阅读量1.3k

点赞数 1

分类专栏：其他分类

本文链接：https://blog.csdn.net/qq_36232611/article/details/103213235

版权

其他分类专栏收录该内容

554 篇文章 5 订阅

订阅专栏

file

作者 | Jeskson
来源 | 达达前端小酒馆

总结⼀些开发中的经验以及⼩程序的优化、部署、上线。

开发者⼯具的使⽤

缩进与缩进设置

缩进有两种⽅式

⼀种是使⽤Tab键，还有⼀种是使⽤空格，建议⼤家使⽤Tab。

⼩程序默认⼀个缩进=⼀个Tab=2个空格，通常前端开发是⼀个Tab=4个空格，你如果不习惯，可以在设置⾥进⾏设置。

快捷键

Ctrl C复制、Ctrl V粘贴、Ctrl X剪切、Ctrl Z重做、Ctrl S保存，Ctrl F搜索等

批量注释快捷键：

windows 是Ctrl /

Mac是Command /

代码块的缩进：

windows是代码左缩进ctrl [、代码右缩进ctrl ]

Mac是⌘ [ 和 ⌘ ]

格式化代码：

Windows为shift alt F

Mac为⇧ ⌥ F

报错提醒

开发者⼯具调试器⾥的Console，

wxml代码查看

开发者⼯具调试器⾥除了有Console，还有⼀个wxml标签⻚

了解当前⼩程序⻚⾯的wxml和wxss结构构成，⽤来调试组件的css样式等

⼩程序的转发功能

 onShareAppMessage: function (res) {
        if (res.from === 'button') {
            // 来⾃⻚⾯内转发按钮
            console.log(res.target)
        }
        return {
            title: '技术训练营',
            path: "pages/home/home,
            imageUrl:""
            success: function (res) {
                // 转发成功
            },
            fail: function (res) {
                // 转发失败
            }
        }
    },

title

为转发的标题，如果不填，默认为当前⼩程序的名称；

path

为当前页⾯路径，也可以为其他页⾯的路径，如果路径写错的话会显⽰“当前页⾯不存在”

imageUrl

为⾃定义图⽚路径，可以是本地⽂件路径或⽹络图⽚路径。⽀持PNG及JPG

显⽰图⽚长宽⽐是 5:4

如果不填写会取当前页⾯，从顶部开始，⾼度为 80% 屏幕宽度的图像作为转发图⽚

⼩程序配置的细节

没有tabBar的⼩程序，删掉app.json的tabBar配置项即可。

下拉⼩程序不出现空⽩

"window":{
    "backgroundTextStyle":"light",
    "navigationBarBackgroundColor": "#1772cb",
    "navigationBarTitleText": "HackWork技术⼯坊",
    "navigationBarTextStyle":"white",
    "backgroundColor": "#1772cb"
  },

禁⽌⻚⾯下拉

{
  "window": {
    "disableScroll": true
  }
}
``

模板

静态的⻚⾯⽚段

技术训练营 ```

使⽤import引⼊这个模板

<import src="/pages/common/foot.wxml" />

调⽤这个模板

<template is="foot" />

动态的⻚⾯⽚段

<template name="head">
  <view class="page-head">
    <view class="page-head-title">{{title}}</view>
    <view class="page-head-line"></view>
    <view wx:if="{{desc}}" class="page-head-desc">{{desc}}</view>
  </view>
</template>

调⽤该模板

<import src="/pages/common/head.wxml" />
<template is="foot" />

创建模板时，使⽤的是，⽽调⽤模板时，使⽤的是

⼩程序的客服

在wxml⽂件⾥添加如下代码

<button open-type="contact"></button>

web-view

承载⽹⻚的容器

<web-view src="https://mp.weixin.qq.com/cgi-bin/wx"></web-view>

❤️ 不要忘记留下你学习的脚印 [点赞收藏评论]

作者Info：

【作者】：Jeskson

【原创公众号】：达达前端小酒馆。

【转载说明】：转载请说明出处，谢谢合作！~

关于目前文章内容即涉及前端，PHP知识点，如果有兴趣即可关注，很荣幸，能被您发现，真是慧眼识英！也感谢您的关注，在未来的日子里，希望能够一直默默的支持我，我也会努力写出更多优秀的作品。我们一起成长，从零基础学编程，将 Web前端领域、数据结构与算法、网络原理等通俗易懂的呈现给小伙伴。分享 Web 前端相关的技术文章、工具资源、精选课程、热点资讯。

若本号内容有做得不到位的地方（比如：涉及版权或其他问题），请及时联系我们进行整改即可，会在第一时间进行处理。