专栏首页达达前端小程序-优化,部署,细节功能

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

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

模板

静态的⻚⾯⽚段

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

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • Android之APP安全测试篇

    反编译 apk 文件,在AndroidManifest.xml 中查找Activity组件

    洛米唯熊
  • Spring Boot2 系列教程(二十二)整合 MyBatis 多数据源

    关于多数据源的配置,前面和大伙介绍过 JdbcTemplate 多数据源配置,那个比较简单,本文来和大伙说说 MyBatis 多数据源的配置。

    江南一点雨
  • SpringBoot 多模块项目实践(附打包方法)

    比起传统复杂的单体工程,使用Maven的多模块配置,可以帮助项目划分模块,鼓励重用,防止POM变得过于庞大,方便某个模块的构建,而不用每次都构建整个项目,并且使...

    Java团长
  • 火车票买不到?看我用python监控票源

    最近高铁票比较难买,还有什么候补。要不停的刷,才有时候可以捡漏。有时候明明候补了,到快开车告诉你余票不足,候补失败。

    赵云龙龙
  • 爬虫专栏第三章介绍

    因为猪哥写文章并不是将所有的功能和方法列一遍而已,我觉得这些大家完全可以在网站找到,所以真的没必要。

    测试小兵
  • AJAX 与跨域通信(一):AJAX 与同源策略

    在远古时代,如果浏览器需要从服务器请求资源,其交互模式为 “客户端发出请求 -> 服务端接收请求并返回相应 HTML 文档 -> 页面刷新,客户端加载新的 HT...

    Chor
  • Java自动化测试框架-09 - TestNG之依赖注入篇 (详细教程)

    TestNG支持两种不同类型的依赖项注入:本机(由TestNG本身执行)和外部(由诸如Guice的依赖项注入框架执行)。

    北京-宏哥
  • Java自动化测试框架-08 - TestNG之并行性和超时篇 (详细教程)

    可以通过在suite标签中使用 parallel 属性来让测试方法运行在不同的线程中。这个属性可以带有如下这样的值:

    北京-宏哥
  • Spring常见问题

    注:本文只是提供学习,对于知识的一个查漏补缺和解答。不要“知其然而不知其所以然”。融会贯通学会如何使用,而不是纸上谈兵。

    OPice
  • 芋道 Spring Boot MyBatis 入门(一)之 MyBatis + XML

    艿艿自己在 知识星球 中,做过一个简单的调研,看看大家使用哪个为主。结果是 MyBatis > JPA > JDBC 。这个也符合在知乎上看到的两篇文章:

    芋道源码

扫码关注云+社区

领取腾讯云代金券