小程序的 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小程序就完成了,简简单单,变现指日可待。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/286725.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

octave中的一些基本操作

1.矩阵的表示&#xff1a;v [1 2 2] %表示1行3列的矩阵 v [1; 2; 2] %表示3行1列的矩阵 v [1 2; 2 3; 4 5] %3*2矩阵 size(v) % 求v的行与列 length(v) %求v的列 2.几个基本矩阵的表示&#xff1a;1&#xff09;s ones(2, 4) %2*4全1矩阵 2&#xff09;m zeros(3, 4) %3…

【大地信】新时代GIS发展趋势与未来展望

一、你必须知道的国内外知名学者 1. RogerTomlinson(罗杰汤姆林森)---GIS之父 Roger Tomlinson从1963年开始创建世界上第一个地理信息系统,即加拿大地理信息系统(CGIS)。因此,Tomlinson被誉为地理信息系统之父。 RogerTomlinson(1933.12---2014.2.9) 2. Michael Fran…

小程序获取头像试试水 02《 程序员变现指南之 微信QQ 小程序 真的零基础开发宝典》

本系列教程是针对粉丝的变现教程&#xff0c;还不是粉丝的可以关注我并且到社区&#xff1a;https://bbs.csdn.net/topics/603436232 进行打卡&#xff0c;不是老粉的也可以获取最终的技术变现学习&#xff0c;最终还有详细的变现教程等你来。 前言 《 程序员变现指南之 微信…

zookeeper 入门讲解实例 转

转 http://www.blogjava.net/BucketLi/archive/2010/12/21/341268.htmlzookeeper使用和原理探究&#xff08;一&#xff09;zookeeper介绍zookeeper是一个为分布式应用提供一致性服务的软件&#xff0c;它是开源的Hadoop项目中的一个子项目&#xff0c;并且根据google发表的&l…

小程序仿微信发现页 03《 程序员变现指南之 微信QQ 小程序 真的零基础开发宝典》

本系列教程是针对粉丝的变现教程&#xff0c;还不是粉丝的可以关注我并且到社区&#xff1a;https://bbs.csdn.net/topics/603436232 进行打卡&#xff0c;不是老粉的也可以获取最终的技术变现学习&#xff0c;最终还有详细的变现教程等你来。 前言 《 程序员变现指南之 微信…

Silverlight与WCF之间的通信(4)silverlight以net.tcp方式调用console上寄宿的wcf服务

&#xff08;由于最近是针对一个demo进行的研究&#xff0c;在之前公开过代码结构&#xff0c;这里只是对需要改动的地方加以说明&#xff09; WCF4.0使得编写wcf服务不再那么复杂&#xff0c;去掉了许多的配置信息&#xff0c;客户端只需要一个服务地址&#xff0c;便可在系统…

Maui学习之路(一)--Windows窗体设置

Maui的学习之路作为 Maui的先行者&#xff0c;我有话要说&#xff0c;微软你为了让我成为牛 B 的程序员真的是煞费苦心&#xff0c;你一定是觉得我不够牛逼所以针对我&#xff0c;存心想气死我。好了废话不多说&#xff0c;Maui现在也算是正式发布了&#xff0c;我有点想用它来…

Git 常用命令大全

Git 是一个很强大的分布式版本控制系统。它不但适用于管理大型开源软件的源代码&#xff0c;管理私人的文档和源代码也有很多优势。 Git常用操作命令&#xff1a; 1) 远程仓库相关命令 检出仓库&#xff1a;$ git clone git://github.com/jquery/jquery.git 查看远程仓库&#…

为什么本地使用js或jquery操作cookie在谷歌浏览器chrome中不生效?

2019独角兽企业重金招聘Python工程师标准>>> 为什么本地使用js或jquery操作cookie在谷歌浏览器chrome中不生效&#xff1f;新手学习js或jquery时&#xff0c;一般是在本地调试&#xff08;前端学习一般用不到服务器端&#xff09;&#xff0c;当学习到cookie一节时&…

全解小程序猜数字游戏 04《 程序员变现指南之 微信QQ 小程序 真的零基础开发宝典》

本系列教程是针对粉丝的变现教程&#xff0c;还不是粉丝的可以关注我并且到社区&#xff1a;https://bbs.csdn.net/topics/603436232 进行打卡&#xff0c;不是老粉的也可以获取最终的技术变现学习&#xff0c;最终还有详细的变现教程等你来。 社区有奖励 下面有投票 本文也…

sublime text 3 安装、添加命令行启动、汉化、注册码

1. 安装sublime&#xff1a; 下载&#xff1a;http://www.sublimetext.com/3 添加命令行启动&#xff1a;设置环境变量->计算机->右键属性->高级系统设置->环境变量->系统变量->Path->编辑&#xff0c;加入";安装路径"(如&#xff1a;;D:\Progr…

Linux下的用户和组

2019独角兽企业重金招聘Python工程师标准>>> 用户和组 GNU/Linux 通过用户和用户组实现访问控制 —— 包括对文件访问、设备使用的控制。Linux 默认的访问控制机制相对简单直接&#xff0c;不过还有一些更加高级的机制&#xff0c;包括 ACL 和 LDAP Authentication.…

漫画C语言 做个聊天软件你不懂也得懂

学完C语言做不出东西&#xff1f;不存在的&#xff0c;咱们做一个最“隐私”的聊天器&#xff0c;就俩人&#xff0c;你和我。咱们聊天的信息你知我知没别人知。 对了&#xff0c;本文评论区点赞、收藏抽奖。 社区也有抽奖&#xff0c;本周社区抽奖帖子 &#xff1a;https://b…

【Microstation】第一章:Microstation三维模型构建概述

MicroStation 是国际上和AutoCAD齐名的二维和三维CAD设计软件&#xff0c;第一个版本由Bentley兄弟在1986年开发完成。其专用格式是DGN&#xff0c;并兼容AutoCAD的DWG/DXF等格式。 MicroStation是Bentley 工程软件系统有限公司在建筑、土木工程、交通运输、加工工厂、离散制造…

libgdx游戏引擎开发笔记(十)SuperJumper游戏例子的讲解(篇四)---- 主游戏界面内部框架编写...

上一讲&#xff0c;我们已经实现了点击play进入游戏界面但仅仅是个黑屏 今天&#xff0c;我们就试着编写代码让它出现游戏的一些简单场景。还是在上一讲的代码基础上&#xff0c;我们创建两个类&#xff1a;World 和 WorldRenderer 1.Word类&#xff1a; 12345678910111213141…

看看《System.CommandLine》

记得之前出过几篇.net tool工具的文章&#xff0c;当时的做法是所有工具的语法分析全部自己解释&#xff0c;自己执行&#xff0c;语法的解释占了大部分时间&#xff0c;反而工具的功能被弱化了。其实微软有一个CommandLine框架在缓慢的发展着&#xff0c;至今都没有正式发布&a…

Sublime Text 3 import Anaconda 无法正常补全模块名解决办法

Sublime Text 3 Anaconda配置 在安装Sublime Text3之后我们总会安装一些插件&#xff0c;比如Python的Anaconda自动补全插件。但是&#xff0c;装好之后发现import 时无法像别的IDE里面那样自动补全模块名&#xff0c;就像图中一样&#xff1a; 解决办法在Sublime Text的git…

Android之添加固定图标到桌面

我的QQ群 1 需求 Android之添加固定图标到桌面 2 部分实现 在AndroidManifest.xml里面添加如下权限 <uses-permission android:name="com.android.launcher.permission.READ_SETTINGS" /><uses-permission android:name="com.android.launcher.perm…

想做程序员?不同方向入门路线全解

学习计算机编程有很多方向如果你没有一个正确的路线&#xff0c;那么就会&#xff1a; 就会跟上面所说的那样&#xff0c;被迫成为一个全栈&#xff0c;这是比较尴尬的。 若你想比较准确的针对某个方向学习&#xff0c;那就继续往下看吧。 一、程序员分为哪几个方向 随着…

【转】OpenGL超级宝典笔记——纹理映射Mipmap

原文地址 http://my.oschina.net/sweetdark/blog/177812 , 感谢作者&#xff0c;若非法转载请联系本人。 目录[-] MipmappingMipmap过滤构建Mip层Mipmaps 硬件生成LOD&#xff08;多细节层次&#xff09;偏好纹理对象管理多个纹理常驻纹理纹理优先级回顾Mipmapping Mipmap是一个…