小程序简介
小程序是一种无需下载安装即可使用的快速应用程序。实现应用的操作“触手可及”;用户可以通过滑动或搜索打开应用程序,完全不需要安装。该方案不仅可以提升用户的应用体验,还可以促进应用的传播。
本文带你快速上手小城开发,了解从环境搭建到开发一个简单的hello world程序,从而上手小程序开发,让你快速成功小程序开发@ >人。之后,你可以研究并努力开发你想开发什么样的小程序。
以下是分步步骤:
1、注册小程序
在开发之前,当然需要注册一个小程序账号。
进入“微信公众平台”进行注册。
这里需要注意的是,邮箱必须是未在微信公众平台注册、未在微信开放平台注册、或未绑定个人微信账号的邮箱才有效。
提交后,登录你注册时使用的邮箱,你会收到一封“激活你的微信小程序”的邮件。点击邮件中的激活链接,完成“信息注册”,激活账号。
2、获取AppID
登录小程序账号后,我们需要先填写“小程序信息”,然后可以在左侧菜单栏中找到“开发”选项,点击进入该栏,然后点击选项卡中的“开发设置”选项。可以看到我们的AppID,也就是微信公众平台上的小程序ID。微信用它来判断小程序的“身份”,并提供相应的功能接口。
3、安装微信开发工具
在“微信官方文档-小程序”开发页面,我们可以找到“工具”选项,选择适合自己电脑系统的版本下载(这里我用的是Windows 64),双-点击运行下载软件后,“下一步”到最后,安装开发者工具后,桌面会自动添加一个“微信开发者工具”的快捷图标,点击“微信开发者工具”图标打开微信小程序开发工具,然后用你的微信软件扫描二维码登录微信小程序制作开发,就可以进入微信网页开发工具了。
4、集成开发环境
安装好开发工具后,就可以开始开发了。
用你在小程序中注册的微信账号扫码,登录“微信开发者工具”开始创建小程序项目。
以下是“微信开发者工具”打开项目后的显示界面。
官方工具中的代码编辑功能很弱,只有基本的代码编辑功能无法满足项目快速开发的需要。
(不过调试和预览功能还是很强大的)。
所以我们可以使用“微信开发者工具”和一个IDE一起开发。例如:VSCode,VSCode是一款免费开源的轻量级跨平台代码编辑器,融合了大部分代码编辑器的优点,集GIT、代码调试、语法高亮于一身。最重要的是它拥有强大丰富的插件系统,支持几乎所有主流开发语言,运行稳定 系统定制开发 ,系统内存使用率低微信小程序制作开发微信小程序制作开发,非常适合搭建IDE。
5、第一个小程序的开发开始:创建一个项目
创建一个小程序项目。
“微信开发者工具”支持小程序、小游戏、代码片段和公众号网页项目的开发,默认选择小程序。
点击右侧空白处的“+”号创建新项目或导入现有项目。这里的AppID是你之前注册小程序时获取的。
在初始操作时,应创建一个空目录来存储项目文件。
6、创建 app.js 文件
在目录下创建一个app.js文件,作为项目的入口文件,通过App()函数注册小程序的应用。该函数接受一个对象参数(函数和数据),例如小程序的生命周期函数。这里我们不关心那些生命周期函数,只需要定义带空参数的App({})函数来注册小程序即可。
//app.js App({})
7、创建一个hello world页面
我们需要显示“Hello World”的内容,所以这里我们需要创建一个页面。在目录下创建一个helloworld.wxml文件,这里我使用一个视图容器视图标签来显示“Hello World”的内容。
// helloworld.wxml Hello World
8、注册helloword页面
小程序中的每个页面都需要在页面对应的js文件中注册,所以这里我们需要在目录下创建一个helloworld.js文件,并使用Page()函数注册一个页面。这个函数还接受一个对象参数,可以是页面的初始数据,一个生命周期函数,一个事件处理函数等等。这里我们还是忽略那些生命周期函数,只定义一个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”内容显示在小程序中。
这里我们创建了一个简单的“Hello Word”小程序。
想美化页面显示
如果你想美化页面显示风格。我们可以继续创建一个 helloword.wxss 文件,我们可以在其中控制 WXML 组件样式。 WXSS的写法类似于CSS,上手容易!
到此,上面简单的10步,10分钟。我们开发了一个小程序,已经开始小程序开发.
您已经是 小程序开发 会员了。
补充知识
小程序目录结构说明
一个小程序体至少需要app.js和app.json两个文件,并且必须放在项目的根目录下(文件名也必须是app)。
app.wxss 是一个全局样式表,主要用于美化视觉样式。没有它也可以实现功能。
通常的小程序页面由四个文件组成,分别定义了页面的结构、样式、功能逻辑和配置信息。
简要介绍如下:
app.js 文件
每个小程序都需要调用app.js中的App方法来注册小程序实例,这是小程序的入口文件。
同时,该文件还用于定义小程序的全局数据和功能,对小程序的整个生命周期进行控制和监控。
定义的函数和数据全局共享,其他页面可以直接使用全局函数和数据。
生命周期函数可以针对不同的场景调用不同的生命周期函数,例如:
onlaunch:监控小程序初始化;
onshow:监控小程序显示;
onhide:监控小程序隐藏;
注意:App() 必须在 app.js 中注册,并且只有一个 App 实例。全局唯一的App实例可以通过getApp方法获取,但不要在App()函数中调用getApp()方法,直接使用这个App实例即可。
这里有一个更高级的技巧,对你以后做 小程序开发 很重要:代码保护!
从文件名也可以知道app.js是一个js文件。而且我们知道js文件是纯文本的,小程序也可以反编译。如果你努力开发了一个小程序,被别人反编译了,你写的代码很容易得到,也很容易修改和复制你的程序。
那么我们需要有产品保护意识:代码是受保护的。有一个叫 JShaman 的平台。传统做前后端开发的程序员都知道,这是一个JS代码保护平台工具,可以对JS代码进行混淆和加密,使代码不可读、不可分析。目的是为了防止其他的代码被别人复制和修复。
在小程序开发中也可以使用这个平台,app.js中的代码可以通过JShaman加密,然后小程序就可以发布了。这样,即使有人反编译了你的小程序,也无法使用里面的代码。
此外,经文还有一个神奇的用途:通过考验。因为applet程序很多,互相复制的applet程序也很多,而且代码几乎一样,而且applet程序不允许发布相同或者高度相似的applet程序,所以很多applet程序都是卡在审核过程中。使用 JShaman 加密代码后,不会因为相同的代码而阻止试用。
回到正题,上面提到了app.js。接下来介绍小程序的其他三个重要文件。
app.json 文件
这个文件是一个json对象,用于全局配置小程序(这个文件不能有注释)。
可以配置页面路径、窗口性能、tabBar标签导航、网络超时、调试模式,其中pages对象用于配置小程序中的所有页面路径(对象为数组,第一个为首页小程序),页面路径不需要写任何后缀,系统会自动加载同名的.json、.js、.wxml、.wxss文件。 window 对象用于设置小程序的窗口性能,包括状态栏、导航栏、标题、窗口背景颜色等。 tabBar 对象用于设置标签导航,也就是底部的菜单栏小程序窗口,可以快速切换页面。
WXML 文件
WXML 是一组类似 HTML 的标记语言,用于构建页面结构。虽然标签与 HTML 有点不同,但其用法基本相同。同时,它还具有类似于 Vue 框架的特性,支持列表循环、条件渲染、模板引用和数据绑定等功能。一个完整的 WXML 语句由一个开始标记和一个结束标记组成,可以是内容或其他 WXML 标记。这里需要注意的是,WXML要求标签必须严格封闭,不封闭会导致编译错误。
WXSS 文件
WXSS 是一种用于在 WXML 中描述组件样式的样式语言。通过定义WXSS来控制页面的渲染风格,类似于HTML中的CSS功能(WXSS具有CSS的大部分特性,在CSS的基础上进行了扩展和修改)。 app.wxss和页面中的.wxss文件的区别在于它的作用域是全局的,而页面中的.wxss文件只能作用于当前页面。
掌握以上内容,你就在通往小程序开发的路上,你就是一个小程序开发人。
另外,重要的小知识:
如果您是“转让”产品或代码的非原创者,通常会在您通过检查时提示您“复制代码”。这时候一般可以使用JSShaman平台来js做小程序。代码经过加密和混淆处理,可以通过检测。
发现、改变
探知、求新
共享,感恩一路相伴
昱远品牌形象已完成全面升级
点击访问新官网