沉浸式发布你的第一个小程序

最新推荐文章于 2022-10-27 13:29:50 发布
最新推荐文章于 2022-10-27 13:29:50 发布
阅读量565 收藏 1
点赞数 1
分类专栏： # 小程序 文章标签： 小程序 微信 微信小程序
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/sinat_41870148/article/details/123386153
版权

文章目录

背景

接到朋友需求,帮他开发一个简单的企业展示的小程序


环境

  • MacOS
  • 微信开发工具稳定版
  • JavaScript基础

流程

一 注册

这是小程序的官网https://mp.weixin.qq.com/cgi-bin/wx,注册流程还是比较完善的,基本上看网站就可以

在这里插入图片描述

1. 注册小程序

这里有个要求:每个邮箱仅能申请一个小程序,导致我之前公众号和测试的邮箱都无法注册,只能新注册了一个邮箱来申请小程序
在这里插入图片描述

2. 登录

登录的网站和公众号是一个网站https://mp.weixin.qq.com/
在这里插入图片描述
扫码登录,选择公众号就是登录公众号,选择小程序就是登录小程序
在这里插入图片描述
注册流程就结束了


二 开发

1. 下载微信开发者工具

这里是官网https://developers.weixin.qq.com/miniprogram/dev/devtools/download.html,我下载了macOS稳定版
毕竟第一次开发,为防止幺蛾子还是老老实实选择稳定版本,也就是这个228M的dmg文件
在这里插入图片描述
安装不细说,毕竟都是一路傻瓜式

2. 修改代码

安装好工具后,需要扫码登录工具,扫码即可.
全程核心都在接下来的写代码

2.1 新建项目

在这里插入图片描述
主要需要设置的地方

  • 项目名称
  • 目录
  • AppID
  • 开发模板
    我有一点JavaScript基础,所以选择了最下面那个
    在这里插入图片描述
    在这里插入图片描述
    点击确定进入开发
2.2 修改代码

新建项目后,pages/index/index.wxml这个文件是核心文件,因为是静态需求,基本上只要改这个文件就可以了
在这里插入图片描述
由于懒得读复杂的微信小程序说明文档,并且无意中看到了rich-text组件,我打算直接写html开发
也就是从模板里面的view嵌套模式

<view>
	<view>
		...
	</view>
</view>

变成常见的html开发模式

<rich-text>
	<header>
		...
	</header>
	<body>
		<div>
			<li>
				<ul>...</ul>
				...
			</li>
			...
		</div>
	</body>
</rich-text>

我的实际结构很简单,因为我分成了banner和body,banner一张图,body一张图
另外过程中查询了一些按钮点击事件的资料,用js写了发现完全可用🤣,只是从onclick变成了bindtap


三 发布

写完发布,这个是最蛋疼的,因为文档太绕了,就是得让你买他们云开发一样.🐧有时候还是很恶心,但是实际很简单

1. 上传代码

在微信开发者工具里面点击上传就可以了
在这里插入图片描述

2. 审核发布

登录刚才的小程序后台,可以看到上传的小程序,点击版本管理
过程中如果需要设置AppSecret,去开发管理处生成就可以了,点一下就行
在这里插入图片描述
这个界面实际上很清晰

  • 最下面是你开发的版本,你提交审核
  • 审核通过后会出现在审核版本这一栏
    可能因为我的内容简单,所以十几分钟就审核完了
  • 点击审核通过后的发布就可以了
    在这里插入图片描述
    发布后就可以在微信小程序搜到你的小程序了

过程中可能遇到的坑

  • 很烦的就是微信云托管一直出现在各方面好像你不用就不行一样. 但是其实又是可以忽略的
  • 发布的过程其实很简单,不要被误导到云开发里面去了,也不需要配置域名什么的
  • 微信的语言和前端很像,实际很多是通用的,急的话可以先考虑用html开发
但老师
关注
专栏目录
threejs微信小程序应用.zip
06-21
1. **环境配置**：由于微信小程序不支持原生的WebGL，开发者需要借助于第三方库如wxgl2d，将WebGL接口转换为小程序可接受的API。 2. **资源加载**：Three.js通常需要加载外部3D模型或纹理，这在小程序中需要特别处理...
微信小程序沉浸式布局实现，兼容性强，容易理解_微信原生小程序 取消沉浸式功能
2401_84281698的博客
04-16 497
开发角度：重新定义系统状态（一般只修改背景），状态栏部分的定位position：absolute。即后续的布局可以延申的系统的顶部。从小程序的角度来说，navigationBar包含了状态了和标题栏两个部分。所以小程序的沉浸式布局，也就是DIY navigationBar的一个过程。如下所示，布局已经跑到状态栏上面去了。IT行业感兴趣的新人，都欢迎加入我们的的圈子（技术交流、学习资源、职场吐槽、大厂内推、面试辅导），让我们一起学习成长！截图有点丑，将就着，红线上面部分为状态栏，下部分为标题栏。
微信小程序——沉浸式导航栏实现
weixin_39501680的博客
10-27 1632
微信小程序——沉浸式导航栏实现
微信小程序之沉浸式导航
weixin_51734548的博客
08-26 1575
首先看效果 欢迎大佬前来点评 第一步：在当前 .json( 点json) 文件中粘贴 "navigationStyle":"custom" { "usingComponents": {}, "navigationStyle": "custom" } 这一步就是把自带的导航栏去掉 第二步：分别粘贴 WXML <view class="indexa"> <view class='nav' style="height:{{customB...
微信小程序沉浸式布局实现，兼容性强，容易理解
小马哥的博客
12-16 2211
1.何为沉浸式布局 用户角度：程序页面布局和手机的状态栏融为一体，视觉效果较好。 开发角度：重新定义系统状态（一般只修改背景），状态栏部分的定位position：absolute。即后续的布局可以延申的系统的顶部。从小程序的角度来说，navigationBar包含了状态了和标题栏两个部分。所以小程序的沉浸式布局，也就是DIY navigationBar的一个过程。 截图有点丑，将就着，红线上面部分为状态栏，下部分为标题栏。 2.怎么沉浸式 修改全局配置文件app.json "window": {
微信小程序沉浸式布局
03-11 1326
微信小程序沉浸式布局
小程序-购物节抽奖小程序.zip
05-28
1. **微信开发者工具**：开发微信小程序的第一步是安装并熟悉微信开发者工具，它提供了代码编辑、预览、调试和发布等一系列功能。通过这个工具，我们可以实时查看小程序的运行效果，进行功能测试和性能优化。 2. **...
仿网易云音乐的YY音乐微信小程序源码
04-08
在本项目中，我们关注的是一个仿照网易云音乐的小程序——YY音乐微信小程序。这个小程序旨在为用户提供类似的音乐体验，包含每日推荐歌曲、歌单和热歌排行榜等功能。接下来，我们将深入探讨这个项目的相关技术知识，...
消防版小程序前端.zip
最新发布
05-24
【消防版小程序前端.zip】这个压缩包文件是一个关于web前端开发的期末大作业，主要聚焦在小程序的开发上。小程序是一种轻量级的应用形态，它无需下载安装即可使用，极大地提升了用户的体验。在这个项目中，我们可以...
微信小程序rss阅读器
01-27
rss-reader 微信小程序rss阅读器 以下内容全文请参看： 写在前面 小程序开发渐进红利期，更多...取了一个很low的名字“全民精进阅读”，意为沉浸式阅读体验，是一款源阅读小程序，主要功能包括：已关注源、源列表、源
微信小程序沉浸式状态栏
zwz1110的博客
05-26 5418
<view class='nav-wrap' style="background-color:{{bgColor}};"> <view style="height:{{statusBarHeight}}px;"></view> <view class='content'> <view class="title">{{title}}</view> <view class='back' bindtap='back'> <image src="../
沉浸式的简单实现效果（很简单）
qq_39432719的博客
09-26 1156
在Activity中实现这个方法，就可以实现沉浸式，但是必须在5.0以上的系统中实现 public void onWindowFocusChanged(boolean hasFocus) {//沉浸式 super.onWindowFocusChanged(hasFocus); if (hasFocus && Build.VERSION.SDK_INT >= 19) {
小程序状态栏沉浸式
chijinrong4312的博客
08-05 2303
1.全局配置，在app.json里添加配置 "window": { "backgroundTextStyle": "light", "navigationBarBackgroundColor": "#E8E8E8", "navigationBarTitleText": "飞利浦健康生活"...
小程序沉浸式_这或许是你见过最美的景区小程序，演绎中华文化之美
weixin_39776239的博客
12-24 507
#20200225每日一拆#【小程序名称】云游敦煌【内容】1、首页(今日画语)：全屏沉浸式体验，一进来还会有动画慢慢扩散，每天都由一幅敦煌画+宜做的事情组合成一个签，设计非常精美，可以点击进入了解画背后的故事；2、探索：算是壁画的内容分发页面，可以这里通过“艺术形式”“朝代”“颜色”来探索壁画的内容，特别是颜色，敦煌的用色之美一下子体现出来；3、游览：支持线上购票(目前疫情原因关闭)，导览(跳转到...
沉浸式状态栏一行代码调用
hss01248的专栏
11-30 8675
用到的库 //状态栏变色 compile 'com.readystatesoftware.systembartint:systembartint:1.0.3' 方法封装 /** * 需要在setContentview之后再调用 * @param activity */ public static void setStatusBarColor(Activity activity) {
小程序又搞事情，H5 开发的春天来了！
AndroidDeveloper
12-28 6534
阅读文本大概需要 2.8 分钟。就在刚刚，微信官方公布了几个小程序爆炸性的新闻，在 2017 年的年底，这个新闻似乎是在告诉大家，小程序能做的事越来越多，2018 年你再也没法在忽视它。1. 首页新增小程序任务栏把小程序的入口直接提到首页，给了小程序更多的流量，这个举动直接就代表了微信的态度，一举提高了小程序的地位，相信在 2018 年，小程序依然会开放更多权限与功能。当你下拉太多，会有一句小提示
微信小程序——沉浸式导航栏实现（含iphoneX适配和组件封装）
yunle51939的博客
11-25 2732
文章目录前言正文JSONnavBar.jsnavBar.wxmlnavBar.wxsstest1.wxml展示效果总结 前言 微信小程序中导航栏一般来说是默认的展示标题等等，可以做的样式改变仅仅能通过配置一些官方提供的属性来实现。除此之外小程序还提供了navigationStyle这个属性可以让用户去自定义的实现导航栏。下面直接奉上代码来说明实现沉浸式导航栏。 正文 JSON 可以在某个页面的json文件中加也可以在全局的app.json中添加属性和引入组件。 页面文件 { "navigationSty
小程序沉浸式导航后续
zwz1110的博客
08-22 362
<view class='page-wrapper index-page-wrapper' style='top:{{statusHeight}}px'> <view class="top"></view> <view class="body"></view> <view class="bottom">&l...
三步实现沉浸式状态栏浅析（即状态栏与APP同色）
qing_小诺的博客
02-06 3844
本篇实现的是沉浸式状态栏。先明确下概念，什么是状态栏？直接上图： 什么是沉浸式状态栏？示例图如下： 非沉浸式状态栏: 沉浸式状态栏: 其实，实质上就是使手机状态栏的颜色改变，使其成为自己想要的颜色。如果把它设置成和APP主色调相同，这样看上去就会好看许多。至于叫法，网上都这么叫，就不用深究它了。下面介绍如何实现，其实很简单，只需三步：
2020年小程序互联网：崛起与商业价值
4. **DTC基础设施**：小程序已经成为品牌直达消费者的重要工具，提供沉浸式场景体验，强化了用户体验和品牌互动。 5. **第三方服务商的角色**：小程序繁荣带动了第三方服务商的发展，他们在广告投放和营销策略方面...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

但老师

要是看起来爽 求打赏一耳光

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值