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

墨蓝 2021-08-20 02:03 298阅读 0赞

![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引⼊这个模板

调⽤这个模板

动态的⻚⾯⽚段

<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>

调⽤该模板

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

⼩程序的客服

在wxml⽂件⾥添加如下代码

web-view

承载⽹⻚的容器

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

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

作者Info：

【作者】：Jeskson

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

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

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

--------------------

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

--------------------

## 请点赞！因为你们的赞同/鼓励是我写作的最大动力！ ##

### 欢迎关注[达达][Link 1]的CSDN！ ###

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

![7d927f18ebd05ea1d505a572393fbc87.jpg][]

[file]: /images/20210724/aa58776553144a1dba53e90b40628ff4.png
[Link 1]: https://blog.csdn.net/qq_36232611
[7d927f18ebd05ea1d505a572393fbc87.jpg]: /images/20210724/e757bac09e344b4590e8f1392ba40166.png