前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
圈层
工具
发布
首页
学习
活动
专区
圈层
工具
MCP广场
社区首页 >专栏 >小程序-优化,部署,细节功能

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

作者头像
达达前端
发布于 2019-11-29 06:23:51
发布于 2019-11-29 06:23:51
59000
代码可运行
举报
文章被收录于专栏:达达前端达达前端
运行总次数: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样式等

⼩程序的转发功能

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
 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配置项即可。

下拉⼩程序不出现空⽩

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
"window":{
    "backgroundTextStyle":"light",
    "navigationBarBackgroundColor": "#1772cb",
    "navigationBarTitleText": "HackWork技术⼯坊",
    "navigationBarTextStyle":"white",
    "backgroundColor": "#1772cb"
  },

禁⽌⻚⾯下拉

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
{
  "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>

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
使⽤import引⼊这个模板

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

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
调⽤这个模板

<template is="foot" />

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
动态的⻚⾯⽚段

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

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
调⽤该模板

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

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
创建模板时,使⽤的是<template name=”模板名”></template>,⽽调⽤模板时,使⽤的是<template is=”模板名” />

⼩程序的客服

在wxml⽂件⾥添加如下代码

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

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
web-view

承载⽹⻚的容器

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

本文参与 腾讯云自媒体同步曝光计划,分享自作者个人站点/博客。
如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
暂无评论
推荐阅读
编辑精选文章
换一批
微信小程序实战–集阅读与电影于一体的小程序项目(四)
19.添加电影tabBar tabBar文档 在posts目录下新建movies目录,分别创建四个文件 app.json配置tabBar { "pages": [ "pages/posts/post", "pages/welcome/welcome", "pages/posts/post-detail/post-detail", "pages/movies/movies" ], "window": { "navigationBarBackgrou
zhang_derek
2018/08/30
6490
微信小程序实战–集阅读与电影于一体的小程序项目(四)
三、Flex布局简介
布局的传统解决方案,基于盒状模型,依赖 display属性 + position属性 + float属性
天蝎座的程序媛
2023/10/17
2940
三、Flex布局简介
第四个页面:制作电影资讯页面
之前的文章列表页面还有一个小功能没有实现,就是点击点击轮播图就能跳转到相应的文章详情页面,这个和点击文章列表跳转到文章详情页面的实现方式是一样的。
端碗吹水
2020/09/23
1.6K0
第四个页面:制作电影资讯页面
基于微信小程序云开发(校园许愿墙app)妄想替代学校的表白墙
随着移动端的不断发展,人们大部分的办公及生活应用都开始趋向于移动端。然而在2017年“微信之父”张小龙带领团队,开发了一款叫做微信小程序的东西,它的出现打破了人们认识移动端的隔膜,由以前的需要先下载app然后在开始工作的老式模式,逐渐的趋向于小程序app(无需下载)的形式。
淼学派对
2022/11/20
1.7K0
基于微信小程序云开发(校园许愿墙app)妄想替代学校的表白墙
小程序当中的文件类型,组织结构,配置,知识点等
在微信小程序中有四种文件类型,主要分样式,骨架,业务,配置,样式为wxss,这里的wxss与页面的css相类似,骨架为wxml,这里的wxml于页面的html相类似,业务逻辑都是以js为结尾,配置文件为json结尾。
达达前端
2019/07/03
8160
小程序当中的文件类型,组织结构,配置,知识点等
微信小程序自定义组件(Toast)
微信官方的wx.showToast这个API用起来限制性太强,在正式项目上根本用不上,但是又没有其他组件或API可以替代,所以就自己通过网上大神的方法自己写了一个自定义的toast组件。
honey缘木鱼
2018/08/22
2.8K0
微信小程序自定义组件(Toast)
小程序 tab 滚动列表优化方案
今天在做百度小程序的转换,发现真机上用之前的swiper-item结合scroll-view 实现的Tab列表的效果不理想,于是我重新思考,发现了一种更合适的方案。
前端开发博客
2020/11/04
2.2K0
小程序 tab 滚动列表优化方案
微信小程序实现一键查询全国快递物流地图轨迹
随着电子商务的快速发展,物流行业成为了一个关键的领域。对于用户来说,了解快递物流的实时状态和轨迹信息非常重要。本教程将介绍如何在微信小程序中实现一键查询全国快递物流地图轨迹的功能。通过这个功能,用户可以方便地查看快递的实时位置和运输轨迹。
用户10428865
2023/06/25
7900
5分钟入门 - 微信小程序开发
如果你还没有微信公众平台的账号,请先进入 微信公众平台 首页,点击 “立即注册” 按钮进行注册。注册的账号类型可以是订阅号、服务号、小程序以及企业微信,我们选择 “小程序” 即可。
用户6808043
2022/02/25
8800
小程序笔记篇
豆瓣top250的数据https://api.douban.com/v2/movie/top250
达达前端
2019/07/03
6570
小程序笔记篇
微信小程序入门文档下载_小程序开发教程全集免费
最新一版的微信开发者工具,把微信公众号的调试开发工作也集成了进去,可以更换开发模式。
全栈程序员站长
2022/09/20
11.1K0
微信小程序入门文档下载_小程序开发教程全集免费
微信小程序操作数据库
  在Web环境中发起HTTPS请求是很常见的,但是微信小程序是腾讯内部的产品,不能直接打开一个外部的链接。例如,在微信小程序中不能直接打开www.taobao.com网站,但是,在小程序开发的时候,如果需要请求一个网站的内容或者服务,如何实现?虽然微信小程序里面不能直接访问外部链接,但是腾讯为开发者封装好了一个wx.request(object)的API。
别团等shy哥发育
2023/02/25
6340
微信小程序操作数据库
开发一个微信小程序(2):编写博客园随笔列表
首先我们需要拿到个人博客园的 access_token,这里我希望不要频繁调用这个接口,当进入小程序时调用一次就够了
冰霜
2022/06/06
1.5K3
微信小程序学习(原生)
# 原生小程序 # 什么是小程序? 无需下载,用完即走(体积太小,刚发布的压缩包体积最大不能超过1M,2017年4月将1M提升2M) # 小程序特点 体积小 同app进行互补的,可以实现app基本的功能 微信扫一扫或者是搜索就可以去下载 开发周期短,成本较低 # 适配方案 viewport适配 width = device-width 单位:rpx iphone6:1rpx = 1物理像素 = 0.5px dpr = 物理像素/设备独立像素 = 2 # 重要的文件 wxml view结构 ---> h
神葳
2021/01/22
8540
小程序页面事件与wxs脚本
在使用 组件跳转到指定的 tabBar 页面时,需要指定 url 属性和 open-type 属性,其中:
timerring
2023/06/10
5580
小程序页面事件与wxs脚本
微信小程序初体验
本文讲述了一位开发者在使用微信开发者工具进行小程序开发过程中,从编写代码、调试、优化,到项目发布上线的整个流程。同时,介绍了开发过程中遇到的具体问题和解决方法,包括页面加载、交互逻辑、性能优化、小程序云开发等。通过本篇文章,读者可以了解到小程序开发的整体流程,并学会如何解决开发过程中遇到的问题。
IMWeb前端团队
2018/01/08
3.1K0
微信小程序初体验
微信小程序实战--集阅读与电影于一体的小程序项目(一)
真正的数据肯定不可能像上面那样写在wxml文件里面,而是从服务器加载的数据,下面模拟从服务器加载数据。
zhang_derek
2018/08/30
1.2K0
微信小程序实战--集阅读与电影于一体的小程序项目(一)
【腾讯游戏人生】微信小程序开发总结
目前【腾讯游戏人生】小程序已经发布上线,大家可以扫小程序码进行体验。接下来主要介绍在开发该款小程序过程中的一些思考和积累。
一时两无
2018/06/08
3.2K3
wepy代码知识点
index-page <style lang="less"> .index-nood-modal { width: 100vw; height: 100vh; position: fixed; left: 0; top: 0; background: rgba(0, 0, 0, 0.7); z-index: 99999999999; .step1 { position: relative; width: 100%; height: 100%;
达达前端
2019/07/03
8290
小程序实战分享4:主商品页与tabbar的UI创建
include可以将目标文件的整个代码引入,相当于是拷贝到include位置,即是代码块复用。
LIYI
2022/03/08
5770
小程序实战分享4:主商品页与tabbar的UI创建
相关推荐
微信小程序实战–集阅读与电影于一体的小程序项目(四)
更多 >
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档
本文部分代码块支持一键运行,欢迎体验
本文部分代码块支持一键运行,欢迎体验