作者：pc668   来源：  热度：116  时间：2022-04-19

小程序开发工具有新版本更新啦！开发体验更好了，详情可以查看微信公众平台-小程序://mp.weixin.qq.com/debug/wxadoc/dev/devtools/devtools.html好了我们开始小程序实战吧！第一步：开发工具下载下载开发工具：微信开发者工具第二步：创建小程序项目1、选择“小程序”开发模式安装完成后，选择“小程序项目”2、添加项目点击“添加”3、项目配置如果没有AppID 点击“可点此体验”也可以哦申请App

小程序开发工具有新版本更新啦！开发体验更好了，详情可以查看微信公众平台-小程序://mp.weixin.qq.com/debug/wxadoc/dev/devtools/devtools.html

好了我们开始小程序实战吧！

第一步：开发工具下载

下载开发工具：微信开发者工具

第二步：创建小程序项目

1、选择“小程序”开发模式

安装完成后，选择“小程序项目”

2、添加项目

点击“添加”

3、项目配置

如果没有AppID 点击“可点此体验”也可以哦

申请AppID:://mp.weixin.qq.com/wxopen/waregister?action=step1

4、完成

开发区域

备注：因为申请测试会占用测试机器资源，所以一个 APPID 一天只能申请一次测试报告。

第三步：代码结构

项目里边生成了不同类型的文件:

.json 后缀的 JSON 配置文件

app.json 是对当前小程序的全局配置，包括了小程序的所有页面路径、界面表现、网络超时时间、底部 tab 等。

.wxml 后缀的 WXML 模板文件

从事过网页编程的人知道，网页编程采用的是 HTML CSS JS 这样的组合，其中 HTML 是用来描述当前这个页面的结构，CSS 用来描述页面的样子，JS 通常是用来处理这个页面和用户的交互。

.wxss 后缀的 WXSS 样式文件

WXSS 具有 CSS 大部分的特性，小程序在 WXSS 也做了一些扩充和修改。

新增了尺寸单位。在写 CSS 样式时，开发者需要考虑到手机设备的屏幕会有不同的宽度和设备像素比，采用一些技巧来换算一些像素单位。WXSS 在底层支持新的尺寸单位 rpx ，开发者可以免去换算的烦恼，只要交给小程序底层来换算即可，由于换算采用的浮点数运算，所以运算结果会和预期结果有一点点偏差。

提供了全局的样式和局部样式。和前边 app.json, page.json 的概念相同，你可以写一个 app.wxss 作为全局样式，会作用于当前小程序的所有页面，局部页面样式 page.wxss 仅对当前页面生效。

此外 WXSS 仅支持部分 CSS 选择器

.js 后缀的 JS 脚本逻辑文件

一个服务仅仅只有界面展示是不够的，还需要和用户做交互：响应用户的点击、获取用户的位置等等。在小程序里边，我们就通过编写 JS 脚本文件来处理用户的操作。

详情可以查看微信官方文档：微信小程序代码构成

总结

以上内容大家都看了都非常简单，更详细的可以参考微信官方文档，根据以上步骤可以搭建自己的第一个微信小程序，大家可以对生成的初始代码可以做一些细微的调整，比如看一下如何获取微信用户信息（userInfo），log日志如何打印，页面怎么跳转等。

使用第三方小程序开发工具

这种方式是使用第三方的小程序开发工具，这类工具一般都不需要编程。区别于微信小程序官方的代码编辑器，这类工具是图形化的界面。做小程序就像做PPT一样。把图片、文字、音乐等等东西插入，然后设置它们的效果，编辑好后，使用这类工具直接自动小程序代码，把生成的小程序代码上传到微信审核就可以上线自己的小程序了。此外，企业可以直接运用行业小程序案例模板，这些模板可以直接拿来使用。最多再改一下模板里的展示照片，中间完全不需要用到代码编程之类的操作，非常适合中小企业去使用。

以上是微信小程序的两种制作方式，相信以后微信小程序会更加备受瞩目，企业应该引起重视，提前做好相应的部署，对于微信小程序开发工具及相关制作教程就介绍到这里，希望对大家有所帮助。

常规代码式

一般有技术实力的公司开发小程序是依照微信官方的代码形式开发，这种方法优点就是，制作出的小程序界面、样式排列各不相同，功能也比较丰富。但缺点就是需要专业的开发者和UI设计师。开发难度和成本比较高。这种常规的方式显然不适合线下的传统中小企业。

1、获取微信小程序的AppID

首先需要登录微信公众号平台小程序 ，就可以在网站的“设置”-“开发者设置”中，查看到微信小程序的 AppID 了，注意不可直接使用服务号或订阅号的 AppID 。

2. 创建项目

我们需要通过开发者工具，来完成小程序创建和代码编辑。开发者工具安装完成后，打开并使用微信扫码登录。选择创建“项目”，填入上文获取到的 AppID ，设置一个本地项目的名称（非小程序名称），比如“我的第一个项目”，并选择一个本地的文件夹作为代码存储的目录，点击“新建项目”就可以了。

项目创建成功后，我们就可以点击该项目，进入并看到完整的开发者工具界面，点击左侧导航，在“编辑”里可以查看和编辑代码，里边已经初始化并包含了一些简单的代码文件。最关键也是必不可少的，是 app.js、app.json、app.wxss 这三个。其中，.js后缀的是脚本文件，.json后缀的文件是配置文件，.wxss后缀的是样式表文件。微信小程序会读取这些文件，并生成小程序实例。在“调试”里可以测试代码并模拟小程序在微信客户端效果，在“项目”里可以发送到手机里预览实际效果。还有那些不懂的，可以找企策宝哦。