如何自己开发一个小程序,怎样才能开发小程序

自己怎么开发小程序（史上最最简单开发小程序的教程）

对于前端工程师而言，小程序以其简单、快捷、项目成本低、总客户流量巨大等优势，成为前端工程师和技术工程师必备的专业技能。

写在前面

1.为什么要学习小程序的定制开发？

对于前端工程师而言，小程序以其简单、快捷、项目成本低、总客户流量巨大等优势，成为前端工程师和技术工程师必备的专业技能。

2.开发和设计前期准备:

(1)有人开玩笑说根本不用学vue微信小程序:

虽然小程序是滕循自己创建的，但是关键概念和vue等架构是一样的~

(2)善于收集精致的小部件:“我们不生产制造代码，我们只是编码装卸工”，善于找到想要的部件，恰如其分、优雅地组装成一个新的大项目，在成也可以算作一种专业技能。

如何实际找到自己想要的微信小程序演示？文末会强烈推荐微信小程序的资源。有许多专家的新项目。

全力以赴

一、注册小程序账号，免费下载IDE

1.在官网查询https://mp.weixin.qq.com/，免费下载IDE。

2.官网上的文字文档永远是最好的学习资料。

注意:

(1)注册账号后会出现一个appid，新建项目时必须填写，否则很多功能都无法使用，比如浏览、提交代码等。

(2)如果已经申请注册了微信公众平台，一定要关注。微信公众平台和微信小程序是两个账号，appids也不一样。定制开发小程序时必须应用微信小程序的appid。

二。applet框架和管理机制的详细介绍

1.每个人都创建了“通用快速入门模板”，然后下面列出了所有新的项目文件:

app.js

所有新项目的启动文档，比如注释写的onlaunch方法，有三个作用:浏览器缓存数据存储和检索的信息；使用回调函数成功登录；获取客户信息。

GlobalData是定义所有新项目的静态变量或变量定义。

app.json

所有新项目的环境变量，如注册网页、装备标签页、设置所有新项目的样式、网页标题等。

！注意:微信小程序默认设置的第一个网页是app.json的pages中的第一个网页

4 .页数

微信小程序的网页部分，几个网页会有几个子文件夹名。比如快速打开模板，会出现两个网页，索引和日志。

5.打开索引文件目录

我们可以看到有三个文档，实际上对应的是大家在web上开发的文档。

Index.wxml匹配Index.wxml

Index.wxss匹配index.css；

Index.js是一个js文件。

一般人们会继续给每个网页小工具添加一个. json文档，可以作为网页小工具的环境变量，设置网页标题。

6.双击鼠标index.js文件

①var app = getApp()；

介绍所有新建项目的app.js文件，用来获取公共自变量等信息内容。

如果你想应用util.js的特殊工具库文件的某种方式，你可以在util.js中导出module.exports，然后你就可以在需要的网页中得到它。

(2)比如我们想获得豆瓣影评，就必须启用api豆瓣电影的；我们先来定义app.js中gloabData中的doubanBase

然后在index.js中应用app.globaData.doubanBase就可以得到这个值

自然，这种变量定义了你也可以在网页需要的时候改变死值。但为了所有新项目的维护，建议将这类常用的主要参数统一写在环境变量中。

(3)接下来，在所有页面({})中，第一个数据，也就是这个网页的页面部分的内部数据信息，会被3D渲染成这个网页的wxml文档，类似于vue和react ~

根据setData更改的数据信息，3D渲染驱动程序网页。

(4)一些生命周期函数。

比如onload()、onready()、onshow()、onhide()，它们监控页面加载、网页第一次3D渲染、网页显示信息、网页隐藏。

很多都可以查官网API。其中，onload()方法和onShareAppMessage()方法(设置网页共享的信息内容)应用最为广泛。

7.WXML模板的应用。

比如这个新项目电影的网页，就是以最低星级和评论组件wxml为模板，应用Star to Movie to movie-list，层层嵌套循环。

在star-template.wxml的网页上写名字特征；如果后期引入进口，可以根据名称获取。

8.通用wxml徽标

视图、文本、图标、滚动条、块、滚动视图，这种标志可以立即在官网文本文件中查看。

三。小程序的框架，每个网页及其发布的注意点

1。整个架构的一些注意事项

(1)所有wxml网页，最下面的标志是

(2)每个网页顶部导航栏的色调，标题，在本网页的json中配备。如果没有装备，取app.json中的总装备

(3)不能用3)json写注释，否则会出错。

(4)路由器相关

1)如果wx。SwitchTab用于自动跳转到Tab页面，在app.json中，你必须在tabBar中申请注册tab页面，才会生效。

注意:标签的最大数量是五个，这意味着头部顶部或底部的标签的最大数量是五个。其他网页只能按照其他路由器方式打开。

2)navigateTo是跳转到非tab页面，如热烈欢迎页面、电影宝贝详情、大城市选择页面；在app.json中申请注册后，不能在tabBar中申请注册，或者不能自动跳转。

3)重新启动自动跳转。新打开的网页左上方没有退款按钮。这个新项目只用过一次，换大城市的条件下。

(5)网页间传输的主要参数

参数主要写在自动跳转的url中，然后在onload模式下通过参数选项接收另一个网页。发送和获取下面的id

(6)数据-自定义特征的应用开始。

比如你怎么用wxml写？

点的恶性事件目标可以这样取，varpostid = event . current target . dataset . postid；

注意:
英文大写字母会转换成小写字母，_标记会转换成持力模式。

(7)恶性事件目标event、event.target和event.currentTarget的区别:

Target指的是今天点击的组件，currentTarget指的是恶性事件捕获的组件。

例如，在图片轮播组件中，click事件应该链接到swiper，以便监视任何图片是否被单击。

此时，这里的目标指的是图像(因为被点击的照片)，而currentTarget指的是雨刷(因为关联的点击事件在雨刷上)。

(8)应用完全免费的网络电缆端口:

在这个新项目中，我们采用了日本风天气api、腾讯地图api、百度地图导航api、豆瓣影评api、新闻头条api等。实际使用方法可以在官网的界面文档中找到，非常详细。

注意:免费接口有接入权，如果用别人的零件来使用这种插座，不如自己申请更换新的钥匙。

附上另一套完整的免费接口:

https://github.com/jokermonn/-Api

！！另外还要注意的是，这个socket的网站域名要分配给微信小程序合理合法的网站域名，否则无法浏览。

(8)wxss有个坑:不能加载本地资源。比如局部使用背景图案，就会出错。

把本地照片做成网络图片的几种方法:上传到个人网页；QQ空之间的相册图片这些也是可以的。

2.转换大城市的网页:

(1)首页应用navigateTo自动跳转到转换大城市的页面，因为首页没有关闭，导致大城市转换，天气信息还是旧的。

合适的解决方案逻辑如下:

1)应用重新启动，自动跳转到大城市的网页。本质就是关闭所有网页，打开一个新的。

2)转换大城市的网页，将公共自变量中大城市的信息内容升级为手动转换的城市区域，然后switchTab返回主页，打开主页重新加载。

3)首页获取大城市信息内容时添加分辨率。如果没有全局信息，就会精确定位。如果有一个全局信息(比如刚刚设置的)，那么它就是全局的。

(2)翻转并返回到大城市目录的顶部

根据scroll-view widget的scroll-top特性，原来是0，翻转会提升；单击返回顶部，并将其设置为0以返回顶部。

3.温度页面

(1)重新设置网页，显示温度信息的逻辑。

先启用微信小程序的wx.getLocation方法获取当前地理坐标，再启用腾讯地图获取当前城市名称和县城名称，两者共存于公共自变量中。

然后启用查询天气和空燃气指数的方式。

(2)容错机制的解决

大城市名称长短不一，有的很长，比如巴彦淖尔，需要动态获取详细的城市名称。

一些偏远的大城市暂时没有天气信息，一定要区分返回的结果。如果没有信息内容，一定要给客户一个优秀的信息提示。

4.邻近地图服务网页

(1)启用百度地图导航的各项服务，搜索酒店餐饮、特色美食、生活服务三种信息内容。其他信息可以在百度地图导航的文本文档中找到。

(2)点击时，给选中的logo加一个外框，数据驱动主视图。所以要用一个长度为3的数字能量数组来存储今天这三个logos是否被选中。

然后wxml根据数据信息动态添加类来改进框架风格。

5.豆瓣影评页面

(1)浏览影片的宝贝细节照片，使用微信小程序本身的previewImage。

(2)宝贝详情应用OnReachPhone()方法，可以监督客户向上拖动到恶性事件的底层，然后再推求获取数据信息，从而完成懒加载的实际效果。

(3)为了提高客户体验水平，js将积分金额分值，比如7分，改为7.0分，然后wxml模板判别分值是否为0，并显示“还没有分值”的消息。

(4)检索后清除输入框。

因为不能用getelementbyId的方法来获取微信小程序中的原语，所以要用数据信息来操作。

向数据添加一个特性searchText来存储输入框的内容，并将其与输入的值特性相关联。在搜索进行中或点击X时，清除文本框的实际效果可以通过清除searchText的自变量来实现。

6.新闻报道网页

(1)采集新闻标题的免费界面，只返回新闻报道的基本信息，没有新闻报道的主题内容。

我找了很多新闻报道的出口，好像都没有新闻报道的主题内容。如果有人知道更强的插座热烈欢迎留言板，请告诉我~

(2)自然也可以自己爬新闻媒体的数据信息。

7.大量的网页

(1)微信小程序现阶段对外开放。外链功能只对公司组织的微信小程序开放。我仍然不能在我的开发和设计中应用外部链接。

(2)小彩蛋网页获取客户信息。

根据wx.setstoragesync('用户信息'，用户信息)；可以登录微信小程序的客户的隐私信息可以发送到后台管理，存储在数据库查询中，方便分析客户。

我只将它存储在浏览器缓存中。较大的应该是10M的缓存文件；如果客户将这个微信小程序从小程序流量目录中删除，缓存文件将被清空。

8。公告通知

(1)小程序最新版本仅限2M，一般所有照片都占据最多的室内空房间，尽量使用在线图片。

如何实际把本地照片变成网上的图片，上面有。

(2)在微信开发工具上浏览检查一切正常，点击提交；电脑版页面微信小程序个人管理中心左侧的“开发管理”列表，第三块——开发设计版本号有内容。

(3)点击提交，填写微信小程序基本信息，即可提交审核。

注意:最好准确填写分类，以便快速审批。我的微信小程序一天半就审核发布了。

到目前为止，我已经过了两天开发设计中遇到的坑和注意事项。听说也有很多坑，等进一步开发设计后再科学研究。