小程序的 HelloWord 01《 程序员变现指南之 微信QQ 小程序 真的零基础开发宝典》
本系列教程是针对粉丝的变现教程,还不是粉丝的可以关注我并且到社区:https://bbs.csdn.net/topics/603436232
进行打卡,不是老粉的也可以获取最终的技术变现学习,最终还有详细的变现教程等你来。
前言
《 程序员变现指南之 微信&QQ 小程序 真的零基础开发宝典》
本系列文章参考《微信小程序开发实战》
教程出完后将会有变现直播,请关注CSDN社区活动公告:https://bbs.csdn.net/forums/A757291228?spm=1001.2014.3001.6682&typeId=19380。
在社区中发文每周将会在活跃前十送出一本实物书籍以及多份实物小礼品,每月送出机械键盘等奖励。
目录 持续更新:
小程序的 HelloWord 01《 程序员变现指南之 微信&QQ 小程序 真的零基础开发宝典》
小程序获取头像试试水 02《 程序员变现指南之 微信&QQ 小程序 真的零基础开发宝典》
小程序仿微信发现页 03《 程序员变现指南之 微信&QQ 小程序 真的零基础开发宝典》
教程所需
由于小程序开发需要一定的基础,这些基础需要提前掌握,本教程只对小程序开发进行零基础说明。
微信小程序开发工具,下载链接:https://developers.weixin.qq.com/miniprogram/dev/devtools/download.html
JavaScript基础
HTML基础
一、新建项目
打开小程序的开发工具后,通过微信扫码进行登录,在登录后需要创建新项目:
在创建新项目时根据自身习惯或项目种类对项目进行取名,在小程序ID处填入对应的小程序ID(小程序ID可在注册小程序后进入管理后台查看)。完成上述步骤后点击右下角绿色按钮进行项目创建。
二、目录结构
点击确定后等待项目创建加载,完毕后将会出现以下操作面板:
每个面板的作用已在图中说明。
接下来在正式开始编辑前我们需要了解一下文件夹目录结构,不同的文件夹目录所存放的文件是不一样的,在正式学习开发前这一个步骤非常重要。
下面是文件的目录说明,暂时需要了解的内容已用红色框标记。
通过以上文件目录还发现一个重要的知识点,例如page目录中的目录名,与内部文件的文件名相同,只是用不通过的后缀作为区分。
此时我们点击某一个文件查看会发现代码看不懂,例如 index.wxml文件:
这时我们需要将所有的代码删除,自己填入最基础的代码。
需要清除的代码文件有 index 目录下的 .js、.wxml、.wxss文件下代码,以及app.js、app.wxss文件中的代码。
注意:.json文件是配置文件,删除代码后将不会索引界面会出现问题,所以在此注意 .json 文件不需要删除其中代码。
清空后在App.js中输入 App,选择如图对应的代码补全提示:
此时代码内容将会进行自动补全,可以看到每个函数中有对应的注释内容:
我们接着在 index.js文件中输入 Page,按照代码补全的提示选择 Page项:
此时补全后将会出现基础的代码内容:
接下来到app.json 中修改代码如下:
{"pages": ["pages/index/index"],"window": {"navigationBarBackgroundColor": "#FF6600","navigationBarTitleText": "Demo 01"}
}
保存之后演示区将会更改:
从演示中可以得知:
navigationBarBackgroundColor 对应的是小程序导航栏的背景色,更改对应的值将会使导航栏状态更改;
navigationBarTitleText 是导航栏的标题;
并且在以上配置中,我们可以得知 windows下的内容为当前小程序主题窗口的相关配置,则以上所说的两个属性均放在 windows 节点下:
"window": {"navigationBarBackgroundColor": "#FF6600","navigationBarTitleText": "Demo 01"}
三、HelloWorld
咱们基本上对第一个项目内容有所熟悉后,现在开始在 index 页面中添加一些元素。在小程序开发中<image>
标签标示图片组件、<text>
标签标示文本。这些标签需要编写在wxml文件中,wxml文件等于是一个页面编辑的文件。
现在点开 index.wxml文件,在文件中输入:
<text>
helloWorld 程序员变现指南 @1_bit
</text>
保存或者按保存快捷键 ctrl+s,这是演示界面将会出现内容:
从中可以明白只要在<text>...</text>
之间填入啥就可以显示啥。
那么我们的第一个helloworld小程序就完成了,简简单单,变现指日可待。
小程序的 HelloWord 01《 程序员变现指南之 微信QQ 小程序 真的零基础开发宝典》相关推荐
- 小程序获取头像试试水 02《 程序员变现指南之 微信QQ 小程序 真的零基础开发宝典》
本系列教程是针对粉丝的变现教程,还不是粉丝的可以关注我并且到社区:https://bbs.csdn.net/topics/603436232 进行打卡,不是老粉的也可以获取最终的技术变现学习,最终还有 ...
- 小程序使用vant-dialog组件内容出不来_微信官方小程序同构新方案Kbone全解析
导语 | 本文是Kbone作者june在云加社区微信群中的分享整理总结而成(编辑:尾尾).同时,june将出席11月16日的TWeb腾讯前端技术大会,欢迎现场交流. 大家好,我是来自腾讯微信小程序团队 ...
- (后续更新)【微信小程序】毕业设计 租房小程序开发实战,零基础开发房屋租赁系统小程序
文章目录 说在前面 小程序展示 一.各功能模块介绍 1.房产服务模块 2.个人中心模块 3.动态发布模块 4.订单管理模块 5.房屋评价模块 二.开发环境准备 1.注册微信小程序账号 2.下载微信开发 ...
- 腾讯加速推进防沉迷新规:新增21款产品 微信/QQ小游戏接入
4月21日,据腾讯游戏公众号消息,腾讯正在加速推进防沉迷新规在旗下游戏中的落实工作,继<和平精英>等12款产品已启用新的防沉迷规则后,从3月下旬至今再新增21款产品完成新规落实. 这21款 ...
- CocosCreator像素鸟小游戏实现(有源码)超详细教程 TS实现小游戏 零基础开发
CocosCreator像素鸟小游戏实现(有源码)超详细教程 TS实现小游戏 大家中秋国庆快乐哈 前言 老规矩先看效果 源码的获取方式在最下面 对于本游戏来说canvas这样设置最佳哦 游戏实现思路: ...
- 独立完美运营版废品回收小程序【区域代理+回收员+用户端+盟入驻】小程序
最近开发了一款废品回收小程序给大家分享一下 运行环境: PHP5.6+MySQL5.7+小程序+域名SSL 本小程序独立开发以Thinkphp为核心 具体功能: 1.多级别权限:超管可招募区域代理和回 ...
- 零基础开发一款微信小程序商城
一个朋友问我能不能帮忙做个商城?我一个完整网页都写不出的 菜鸟程序员,我该怎么拒绝呢?好吧,看在小程序这么火的形势下,我还是答应了!找了个开源项目,差不多花了三天时间搞定. 主要是讲一个开源的微信小程 ...
- 情侣积分微信小程序零基础开发教程(附代码及开发指南)
To Our Loves 本文最新版本 0 情侣积分互动小程序 在idofSunChonggao 的基础上进行开发, 感谢! 且感谢初版(UxxHans)! ⭐ 如果本仓库对您有所帮助,您的fork或 ...
- 零基础开发小程序第四课-查看功能开发
目录 1 创建页面 2 搭建页面 3 创建数据 4 数据绑定 5 页面传参 6 预览发布 总结 本篇是我们零基础入门课的第四篇,前三篇我们介绍了创建项目.列表功能.新增功能,本篇我们介绍一下查看详情功 ...
最新文章
- 苏宁“砍价团”高可用、高并发架构实践
- Leetcode 107. 二叉树的层次遍历 II 解题思路及C++实现
- 【行业进展】国内自动驾驶发展的怎么样了?
- jquery插件---自动补全类插件
- 罗永浩直播带货花落谁家?不止是价高者得之
- mac删除android sd卡,如何从mac完全删除android及其所有文件?
- Java Duration类| isZero()方法与示例
- 高并发之服务降级和服务熔断____服务降级、熔断、限流的区别
- linux修改栈指针x86,x86-堆栈指针未填充16时libc的system()导致分段...
- 体验式培训之“铁人七项”
- 转: MySql数据引擎简介与选择方法
- C#基础17:匿名方法与Lambda表达式
- 在SQLite数据库中获取新插入数据自增长的ID值
- 基于LMI的线性系统滑模鲁棒控制
- 非洲正在打造一个完全不同的人工智能产业
- GoLang之使用uber-go/dig进行依赖注入
- 帮你抢小游戏流量红利——360小游戏接入指南
- Docker11_1:Docker阿里云仓库
- 用mask-rcnn训练自己的数据
- java计算机毕业设计贵州省高考本科志愿填报指导系统源程序+mysql+系统+lw文档+远程调试
热门文章
- 更新两个WPF开源项目
- WebRTC成为W3C和IETF正式标准
- dotNet Core 3.1 使用 Elasticsearch
- 跟我一起学Redis之看完这篇比常人多会三种类型实战(又搞了几个小时)
- 十分钟搭建自己的私有NuGet服务器-BaGet
- .Net微服务实战之技术架构分层篇
- Asp.Net Core 中IdentityServer4 授权中心之应用实战
- 系统蓝屏的几种姿势,确定不了解下么?
- ASP.NET Core on K8S深入学习(6)Health Check
- Kubernetes架构为什么是这样的?