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

作者 | 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
  }
}
``

模板

静态的⻚⾯⽚段

<template name="foot">
<view class="page-foot">

<view class="index-desc" style="text-align:center;font-size:12px;botto

m:20rpx;position:absolute;bottom:20rpx;width:100%">技术训练营</view>
</view>
</template>

使⽤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" />

创建模板时，使⽤的是<template name=”模板名”></template>，⽽调⽤模板时，使⽤的是<template is=”模板名” />

⼩程序的客服

在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 前端相关的技术文章、工具资源、精选课程、热点资讯。

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

----
## 请点赞！因为你们的赞同/鼓励是我写作的最大动力！
### 欢迎关注[达达](https://blog.csdn.net/qq_36232611)的CSDN！

**这是一个有质量，有态度的博客**