您当前的位置:首页 > 电脑百科 > 程序开发 > 移动端 > 小程序

10分钟入门微信小程序开发:从环境搭建到开发出第一个程序。

时间:2020-05-14 11:18:52  来源:  作者:

小程序简介

小程序是一种不需要下载安装即可使用的快速应用,它实现了应用“触手可及”的操作;用户扫一扫或搜一下即可打开应用,完全不需要安装,因此小程序不仅可提高的用户的应用体验,也方便应用的传扩散。

本文带大家快速入门小程开发,了解从环境搭建到开发出一个简单hello world程序,从而上手小程序开发,让你快速成功小程序开发人员。之后,想开发什么样的小程序,就可以自己研究和努力了。

10分钟入门微信小程序开发:从环境搭建到开发出第一个程序。

 

下面,是循序渐经的步骤:

​1、注册小程序

在开发之前,当然需要先注册一个小程序账号

进入“微信公众平台”进行注册。

这里需要注意的是邮箱必须是未被微信公众平台注册、未被微信开放平台注册、未被个人微信号绑定的才有效。

提交之后登录你注册用的邮箱,会收到一个条“激活你的微信小程序”的邮件,点击邮件中的激活链接去完善“信息登记”即可激活账户。

10分钟入门微信小程序开发:从环境搭建到开发出第一个程序。

 

​ 2、获取AppID

登录小程序账号之后我们需要先填写“小程序信息”,然后可以在左侧菜单栏中找到“开发”选项,点击进入该栏后进行点击tab中的“开发设置”选项。就可以看到属于我们的AppID,这是微信公众平台上的小程序ID。微信通过它来确定小程序“身份”及提供相应的功能接口。

10分钟入门微信小程序开发:从环境搭建到开发出第一个程序。

 

3、安装微信开发工具

在“微信官方文档-小程序”的开发页面中,我们可以找到“工具”选项,选择适合自己电脑系统版本的进行下载(这里我用的是windows 64),双击运行下载好的软件然后“下一步”到底即可,安装完开发者工具后会自动在桌面添加“微信开发者工具”快捷图标。通过点击“微信开发者工具”图标打开微信小程序开发工具,然后用自己的微信软件扫描二维码登录,就可进入微信web开发者工具。

​ 4、集成开发环境

安装开发工具之后就可以进行开发了。

用你注册小程序的微信账号扫码登录“微信开发者工具”就可以开始创建小程序项目了。

下面是“微信开发者工具”打开项目之后的显示界面。

官方工具中的代码编辑功能很弱,只有基本的代码编辑功能根本无法满足撑项目快速开发的需求。

(不过调及试预览功能还是很强大的)。

10分钟入门微信小程序开发:从环境搭建到开发出第一个程序。

 

所以我们可以使用“微信开发者工具”再搭配一款IDE来一起开发。比如:VSCode,VSCode是一款免费开源的轻量级跨平台代码编辑器,集成了大部分代码编辑的器的优点,集成GIT、代码调试、语法高亮。最主要是拥有强大丰富的插件系统,几乎支持所有主流的开发语言且运行稳定,系统内存占用率低非常适合搭建IDE。

10分钟入门微信小程序开发:从环境搭建到开发出第一个程序。

 

5、开发第一个小程序开始:创建项目

创建小程序项目。

“微信开发者工具”支持小程序、小游戏、代码片段及公众号网页项目开发,默认选择小程序。

10分钟入门微信小程序开发:从环境搭建到开发出第一个程序。

 

​点击右侧空白处的“+”号来创建新项目或者导入已有项目,这里的AppID就是前面注册小程序的时候获取的。

10分钟入门微信小程序开发:从环境搭建到开发出第一个程序。

 

初始操作时,应该创建一个空目录,用于存放项目文件。

10分钟入门微信小程序开发:从环境搭建到开发出第一个程序。

 

6、创建app.js文件

在目录中创建一个app.js文件,该文件作为项目的入口文件,通过App() 函数来注册一个小程序的应用。 该函数接受一个object参数(function 和 data),比如小程序的生命周期函数。这里我们先不管那些生命周期函数,只要定义个空参数的App({})函数即可注册小程序。

//app.js
App({})

7、创建一个hello world页面

我们需要显示“Hello World”内容,所以这里我们需要创建一个页面。在目录中创建一个helloworld.wxml文件,这里我用个视图容器view标签来显示“Hello World”内容。

// helloworld.wxml
<view>Hello World</view>

8、注册helloword页面

小程序中的每个页面都需要在页面对应的 js 文件中进行注册,所以这里我们需要在目录中创建一个helloworld.js文件并通过Page() 函数用来注册一个页面。该函数同样接受一个 object参数,可以是该页面的初始数据、生命周期函数、事件处理函数等。这里我们还是先不管那些生命周期函数,只要定义个空参数的Page({})函数即可注册页面。

// helloword.js
Page({})

9、创建app.json文件

页面注册好了我们就需要来配置页面路径了,告诉小程序要加载的页面在哪里。这就需要我们在根目录下创建一个app.json文件,通过该文件来对小程序进行全局配置。而其中的pages对象就是用来指定小程序由哪些页面组成,每一项都对应一个页面的 路径(含文件名) 信息。

注意:文件名不需要写文件后缀,框架会自动去寻找对于位置的 .json, .js, .wxml, .wxss 四个文件进行处理。数组的第一项代表小程序的初始页面(即首页),小程序中新增/减少页面时都需要对 pages数组进行修改。

// app.json文件
{
  "pages": [
    "helloworld"   //由于该文件目前存放在根目录,所以这里直接填文件名
  ],
}

10、调试

接下来我们就可以打开“微信开发者工具”并切换到“导入项目”页面,在目录栏中选择我们的项目文件夹。AppID没有的可以选择游客模式,点击“导入”按钮即可。程序会自动生成project.config.json配置文件和sitemap.json站点地图配置文件(可以暂时忽略),在左侧的模拟器中我们可以看到在小程序中显示了我们的“Hello Word”内容。

10分钟入门微信小程序开发:从环境搭建到开发出第一个程序。

 

​到这里我们就创建了一个最简单的“Hello Word”小程序。

想美化页面显示

如果你想美化页面显示样式。我们可以继续创建一个helloword.wxss文件,在这里我们可以WXML 的组件样式进行控制。WXSS的写法和css相似,很容易上手的!

10分钟入门微信小程序开发:从环境搭建到开发出第一个程序。

 

到此,以上简单10步,10分钟。我们就开发出了一个小程序,就已入门小程序开发了。

你已经是一个小程序开发者了。

补充知识

小程序目录结构说明

一个小程序主体至少需要app.js和app.json这两个文件组成且必须放在项目的根目录(文件名也必须为app)。

app.wxss为全局样式表,主要是用来美化视觉样式的,没有也可以,也能实现功能。

而通常的小程序页面由四个文件组成,分别定义了页面的:结构、样式、功能逻辑、配置信息

如下做简单介绍:

10分钟入门微信小程序开发:从环境搭建到开发出第一个程序。

 

app.js文件

每个小程序都需要在 app.js 中调用 App 方法来注册小程序实例,是小程序的入口文件

同时该文件也是用来定义小程序的全局数据和函数,控制、监听小程序的全生命周期。

定义的函数及数据都是全局共享的,其他页面可以直接使用全局函数和数据。

而生命周期函数可以针对不同场景可以调用不同的生命周期函数,如:

onlaunch:监听小程序初始化;

onshow:监听小程序显示;

onhide:监听小程序隐藏;

注意:App() 必须在 app.js 中注册且只有一个 App 实例,通过 getApp 方法可以获取到全局唯一的 App 实例,但不要在 App() 函数中调用 getApp() 方法,使用 this 就可以拿到 App 实例。

10分钟入门微信小程序开发:从环境搭建到开发出第一个程序。

 

这里再讲一点高级技巧,对于将来你做小程序开发很重要:代码保护

由文件名也可知,这是app.js是个js文件。而我们知道,js文件是明文的、小程序也是可以反编译的。如果你辛苦开发了一个小程序,被别人反编译,很轻松就可以获得你写的代码,很容易就可以修改、复制你的程序。

那么,我们需要有产品保护意识:代码是保护起来的。有一个平台,叫作JShaman,传统做前后端开发的程序员都知道,这是一个JS代码保护平台工具,可以把JS代码进行混淆加密,使代码不可读不可分析,其目的就是防止自己别的代码被别人复制修复了使用

在小程序开发中,同样可以用到这个平台,可以把app.js中的代码经JShaman加密了,再发布小程序。这样即使别人反编译了你的小程序,他也没办法用里面的代码。

而且,经还有一个神奇的用于:过审。因为小程序很多了,很多互相拷贝的小程序也很多,代码几乎是一样的,而小程序不允许同样或雷同度过高的小程序发布,所以很多小程序卡在过审环节。而用JShaman加密代码后,过审就不会因为代码雷同而被卡。

回到正题,上面讲了app.js。下面再介绍小程序其它三个重要文件。

app.json文件

该文件是一个json对象,用于对小程序进行全局配置(该文件中不能有注释)。

它可以配置页面路径,窗口表现,tabBar标签导航,网络超时,debug模式,其中pages对象用来配置小程序的里面所有的页面路径(该对象是个数组且第一个是小程序的首页),页面路径不需要写任何后缀,系统会自动去加载同名的 .json、.js、.wxml、.wxss 文件。window对象用于设置小程序的窗口表现,包括状态栏、导航条、标题、窗口背景色等。tabBar对象用于设置标签导航,就是小程序窗口底部的菜单栏,可以实现快速切换页面。

10分钟入门微信小程序开发:从环境搭建到开发出第一个程序。

 

WXML文件

WXML是一套类似html的标签语言,是用来构建页面结构的。标签虽然与HTML有点不同但用法基本一致,同时还具备了类似Vue框架的特性,支持列表循环、条件渲染、模板引用及数据绑定等功能。一段完整的WXML语句由一个开始标签和一个结束标签组成,在标签中可以是内容也可以是其它WXML标签。这里需要注意的是WXML要求标签必须是严格闭合的,没有闭合将会导致编译错误。

10分钟入门微信小程序开发:从环境搭建到开发出第一个程序。

 

WXSS文件

WXSS是一套样式语言,用于描述 WXML 的组件样式。通过定义WXSS来控制页面的呈现样式的,这个跟HTML中的CSS功能差不多(WXSS 具有 CSS 大部分特性并在CSS基础上进行了扩充以及修改)。app.wxss与页面中的.wxss文件不同之处在于它的作用域是全局,而页面中的.wxss文件只能作用于当前页面。

10分钟入门微信小程序开发:从环境搭建到开发出第一个程序。

 

掌握以上内容,你便入门了小程序开发,是名小程序开发人员了。



Tags:微信小程序   点击:()  评论:()
声明:本站部分内容及图片来自互联网,转载是出于传递更多信息之目的,内容观点仅代表作者本人,如有任何标注错误或版权侵犯请与我们联系(Email:2595517585@qq.com),我们将及时更正、删除,谢谢。
▌相关推荐
微信小程序“无障碍急救平台”日前上线,解决听障人士120急救呼叫难题。听障人士在日常生活、工作中常有信息缺失、沟通不良的困难。如果自身或身边人突发急症,则需要依靠他人...【详细内容】
2021-12-15  Tags: 微信小程序  点击:(10)  评论:(0)  加入收藏
现如今卖东西的渠道是越来越多,如今在微信小程序也能开店卖东西了,有的小伙伴想在小程序上卖东西但不知道该怎么做,下面就来讲讲微信小程序如何做店铺,利用微信小程序!但凡得到公...【详细内容】
2021-11-03  Tags: 微信小程序  点击:(32)  评论:(0)  加入收藏
作者:灰灰来源:JS每日一题 一、背景传统的web开发实现登陆功能,一般的做法是输入账号密码、或者输入手机号及短信验证码进行登录服务端校验用户信息通过之后,下发一个代表登录态...【详细内容】
2021-10-29  Tags: 微信小程序  点击:(43)  评论:(0)  加入收藏
一、微信服务号主要偏于服务交互(类似银行,114,提供服务查询),认证前后都是每个月可群发4条消息(不适用于个人)二、微信订阅号主要偏于为用户传达资讯(类似报纸杂志),认证前后都是每天...【详细内容】
2021-10-22  Tags: 微信小程序  点击:(82)  评论:(0)  加入收藏
总结列举微信小程序开放能力清单 硬件能力 蓝牙 NFC读写 连接WIFI设备 开放能力 ...【详细内容】
2021-09-27  Tags: 微信小程序  点击:(60)  评论:(0)  加入收藏
功能说明脱离公众号下的小程序,单独使用功能特点小程序:是一种不需要下载安装即可使用的应用,它实现了应用“触手可及”的梦想,用户扫一扫或者搜一下即可打开应用。也体现了“用...【详细内容】
2021-09-27  Tags: 微信小程序  点击:(46)  评论:(0)  加入收藏
微信小程序不愧是智能时代的宝藏发明,不用下载不占内存,点开就能用。今天介绍这7个小程序,个个都拥有超实用的功能,用了就知道有多香! 1.腾讯文档腾讯出品的在线文档编辑器,提供在...【详细内容】
2021-08-27  Tags: 微信小程序  点击:(101)  评论:(0)  加入收藏
微信上有很多好用的小程序,虽然不是很多人知道,但却很强大。这里就来分享8款相见恨晚的微信小程序,可以让手机更好用,还不知道的话,未免有点太可惜了,一起来看看吧。 1、专去水印...【详细内容】
2021-07-28  Tags: 微信小程序  点击:(101)  评论:(0)  加入收藏
微信小程序的出现让手机内存不再高负荷,同时也出现了很多实用的小程序例如以下这么几个。1、文章截图文章截图小程序主要实用功能可以通过截图实现保证精度的情况下进行无缝...【详细内容】
2021-07-14  Tags: 微信小程序  点击:(83)  评论:(0)  加入收藏
微信上有很多小程序,比起app更小巧,使用起来更加方便。这里就来为大家分享7个精心挑选的微信小程序,每一个都让人觉得相见恨晚,能让你的手机更好用。 1、群相册服务专属于一个群...【详细内容】
2021-07-13  Tags: 微信小程序  点击:(124)  评论:(0)  加入收藏
▌简易百科推荐
一、项目背景随着小程序在用户规模和商业化上取得的极大成功,各大平台都推出了自己的小程序。然而这些平台的小程序开发在语法上又不尽相同,不同平台小程序代码的维护需要投入...【详细内容】
2021-11-05  携程技术    Tags:小程序   点击:(65)  评论:(0)  加入收藏
作者:灰灰来源:JS每日一题 一、背景传统的web开发实现登陆功能,一般的做法是输入账号密码、或者输入手机号及短信验证码进行登录服务端校验用户信息通过之后,下发一个代表登录态...【详细内容】
2021-10-29  Nodejs开发    Tags:微信小程序   点击:(43)  评论:(0)  加入收藏
总结列举微信小程序开放能力清单 硬件能力 蓝牙 NFC读写 连接WIFI设备 开放能力 ...【详细内容】
2021-09-27  软件开发分享    Tags:微信小程序   点击:(60)  评论:(0)  加入收藏
核心商城(CoreShop)介绍核心小程序商城系统(CoreShop) 是基于 Asp.Net 5.0、Uni-App开发、支持可视化布局的小程序商城系统;前后端分离,支持分布式部署,跨平台运行;拥有分销、代理、...【详细内容】
2021-07-20  码农也有梦想    Tags:小程序商城   点击:(115)  评论:(0)  加入收藏
介绍Vue3发布已经有一段时间了,从目前来看,其生态还算可以,也已经有了各种组件库给予了支持,但是不管是Vue3还是Vue2都无法直接用来开发小程序,因此国内一些技术团队针对Vue开发...【详细内容】
2021-07-13  爱分享Coder    Tags:小程序   点击:(204)  评论:(0)  加入收藏
首先明确几个概念1. W3C:指万维网联盟(World Wide Web Consortium),是一个国际的标准的制定机构。2. H5(HTML5,HyperText Markup Language 5的缩写),HTML5 是由W3C制定的新HTML标...【详细内容】
2021-07-06  畅游零和一的海洋    Tags:微信小程序   点击:(153)  评论:(0)  加入收藏
在开发微信公众号时,需要不时请求URL和数据封装。为了不做重复的工作。提取公共部分进行封装。产生了相应的公众类。今天先来写下请求类,代码如下:public class HttpRequestP...【详细内容】
2021-06-16  java浮萍  今日头条  Tags:公共类   点击:(134)  评论:(0)  加入收藏
小程序上线后,改版了很多次,包括一些 Api 接口也有改动。如果你学习一个很久之前的小程序项目是没有意义的,本文推荐的小程序都是最近有更新的。相信在你学习、部署的过程中,不...【详细内容】
2021-06-08    程序猿久一  Tags:微信小程序   点击:(207)  评论:(0)  加入收藏
自从2019年微信公开课Pro在微信之夜演示《跳一跳》以来,微信小游戏已经不知不觉走过的三年,这三年中我们可以明显看到微信对小游戏的扶持,对于微信开发者来说,微信小游戏开发以...【详细内容】
2021-05-25  开课吧科科  今日头条  Tags:微信小游戏   点击:(212)  评论:(0)  加入收藏
学习编程从hello world开始。学习微信小程序开发首先要安装一个微信开发者工具,官网上免费下载童叟无欺,下载完傻瓜式安装即可。 双击微信开发者工具,然后选择小程序,然后点击...【详细内容】
2021-05-12  程序员fearlazy  fearlazy  Tags:微信小程序   点击:(268)  评论:(0)  加入收藏
最新更新
栏目热门
栏目头条