zoukankan      html  css  js  c++  java

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

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

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