对于前端工程师而言，小程序以其简单、快捷、项目成本低、总客户流量巨大等优势，成为前端工程师和技术工程师必备的专业技能。
写在前面
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)点击提交，填写微信小程序基本信息，即可提交审核。
注意:最好准确填写分类，以便快速审批。我的微信小程序一天半就审核发布了。
到目前为止，我已经过了两天开发设计中遇到的坑和注意事项。听说也有很多坑，等进一步开发设计后再科学研究。
