前端开发必学技能：微信小程序开发全攻略
发表时间：2024-07-12 09:38:37
文章来源：炫佑科技
浏览次数：126
菏泽炫佑科技 菏泽炫佑小程序开发 菏泽炫佑app制作 炫佑科技
前端开发必学技能：微信小程序开发全攻略
1.为什么要学习小程序开发？
对于前端开发来说，微信小程序凭借其简单、快速、开发成本低、用户流量巨大等特点，已经成为前端开发工程师必备的技能。
2.开发准备：
（1）有人开玩笑说，你甚至不需要学习 Vue小程序：
微信小程序虽然是腾讯自己开发的，但是核心思想和Vue等框架是一样的~
（2）善于收藏精美的小组件：“我们不生产代码，我们只是代码搬运工。”善于寻找自己想要的组件，并将它们巧妙而优雅地组装成大项目，也是程序员的基本功。
如何找到你想要的小程序demo？文章*后我会推荐小程序资源给你，里面有很多大牛的项目。
卷起袖子开始工作
1.注册小程序账号并下载IDE
1.在官网注册并下载IDE。
2.官方文档一直都是*好的学习资料。
注意：
（1）注册账号后会有一个appid，新建项目时需要填写appid，否则很多功能无法使用，比如预览、上传代码等。
（2）如果你已经注册了微信公众号，请注意，微信公众号和小程序是两个账号，appID也是不同的，小程序开发必须使用小程序的appID。
2.小程序框架及运行机制介绍
1、我们创建一个“普通快速启动模板”，整个项目目录如下：
2.app.js
整个项目的启动文件主要有三大功能，比如注释掉的方法，就是用于浏览器缓存中数据的存储和获取；登录成功回调的使用；获取用户信息。
就是为整个项目定义全局变量或者常量。
3.app.json
整个项目的配置文件，比如注册页面，配置tab页，设置整个项目的风格，页面标题等。
!注意：小程序启动时默认首页是app.json中pages里的**页。
4.页面
小程序的页面组件有多个子文件夹，例如快速启动模板有index、logs两个页面。
5.打开索引目录
可以看到有三个文件，其实和我们针对web开发文件是一一对应的。
index.wxml对应index.html；
index.wxss对应的是index.css；
index.js是js文件。
一般我们还会给每个页面组件添加一个.json文件作为该页面组件的配置文件，用于设置页面标题等功能。
6.双击index.js文件
（1）变量 app = ();
导入整个项目的app.js文件，获取期间公共变量等信息。
如果要使用util.js工具库中某个方法，就在util.js中导出，然后在需要的页面中获取。
（2）比如我们要获取豆瓣电影，就需要调用豆瓣的API；我们先在app.js中定义
然后在index.js中使用app..来获取该值。
当然，当页面需要这些常量时你也可以采用硬编码值，但是为了整个项目的维护，建议将这样的公共参数写在配置文件中。
（3）接下来在整个页面中（{}），**个数据是这个页面的组件内部的数据，这些数据会渲染到页面的wxml文件中，类似vue、react啦~
通过修改数据，驱动页面渲染
（4）一些生命周期函数
比如()、()、()等，监控页面加载、页面初始渲染、页面显示、页面隐藏等。
可以查看官方API获取更多信息，*常用的是()方法和()方法（设置页面共享的信息）
7.wxml模板的使用。
例如本项目的电影页面，采用*小星级组件wxml作为模板，从星级到电影到电影列表，一层层嵌套。
在star-.wxml页面中写入name属性；然后在导入的时候通过name获取
8.常用wxml标签
view、text、icon、block、-view等，这些标签可以直接查看官网文档
3.小程序框架、页面及上线注意事项
1.整个框架中需要注意的几点
（1）整个wxml页面的*底层标签是oh。
（2）每个页面顶部导航栏的颜色react开发微信小程序，title，都是在本页面的json中配置的，若没有配置，则取app.json中总的配置。
（3）注释不能用json写，否则会报错。
（4）路由相关
1）如果使用wx.跳转到tab页，除了在app.json中注册pages页面外，还需要注册tab页才能生效。
注意：标签页*多为 5 个，也就是顶部或底部的菜单*多为 5 个。其他页面只能通过其他路由方式打开。
2）跳转到非tab页，比如欢迎页，电影详情页，城市选择页；在app.json中注册后就不能再注册了，否则无法跳转。
3）跳转。新打开的页面左上角没有返回按钮。这个项目只用过一次，在切换城市的时候。
（5）页面间传递参数
参数写在重定向的URL中，然后对方页面接收方法中的参数，传递并获取id如下
（6）使用以数据开头的自定义属性
比如我们在wxml中怎么写
可以通过如下方式获取click事件对象：var = event...;
注意：大写字母会转换为小写字母，带有 _ 符号的字母会转换为驼峰式字母。
（7）事件对象event、event.和event.的区别：
指的是当前点击的组件，指的是捕获事件的组件。
比如在轮播组件中前端开发必学技能：微信小程序开发全攻略，应该绑定点击事件，这样就可以监听是否有任意一张图片被点击。
此时，它引用的是image（因为点击了图片），它引用的是（因为点击事件绑定在了top上）
（8）使用免费网络接口：
本项目用到了和风天气API、腾讯地图API、百度地图API、豆瓣电影API、聚合头条新闻API等，具体使用可以参考它们官网的接口文档，很详细。
注意：免费接口是有访问限制的，所以如果将此接口和别人的组件一起使用的话，*好注册一个新的key进行替换。
附上免费接口合集：
！！另外请注意，这些接口的域名必须配置为小程序的合法域名，否则无法访问。
（8）wxss有个坑，不能读取本地的资源，比如背景图片用在本地就会报错。
本地图片转为在线图片有几种方法：上传到个人网站；QQ空间相册等。
2. 切换到城市页面：
（1）首页跳转到城市切换页，由于没有关闭首页，所以切换城市返回后天气信息还是原来的。
正确的处理逻辑如下：
1）使用跳转切换城市页面，其实就是关闭所有页面，然后打开一个新页面。
2）切换到城市页面，更新公共变量中的城市信息为手动切换的城市区域，然后返回首页，触发首页重新加载。
3）获取首页城市信息时，增加判断，如果没有全局信息，则使用定位信息，如果有全局信息（比如刚才设置的），则使用全局信息。
（2）滚动返回城市列表顶部
基于-view组件的-top属性，初始值为0，滚动时值会增加；点击Back to Top设置为0即可返回顶部
3. 天气页面
（1）初始化页面，天气显示逻辑
首先调用小程序的wx.方法获取当前的经纬度，然后调用腾讯地图获取当前的城市名和县名，存放在公共变量中。
然后调用方法查询天气和空气质量。
（2）容错处理
城市名称的长度不一，有的城市名称特别长，如巴彦淖尔市，需要动态获取完整的城市名称。
有些偏远城市还没有天气信息，我们需要对返回的结果进行判断，如果没有信息的话，给用户很好的提示信息。
4. 周边地图服务页面
（1）调用百度地图各项服务，查询酒店、美食、生活服务等信息，详情请参见百度地图文档
（2）点击时，给被点击的图标添加边框。view是数据驱动的，所以用一个长度为3的数组来保存三个图标当前是否被点击的状态。
然后wxml根据数据动态添加类和边框样式。
5.豆瓣电影页面
（1）影片详情页的预览图是利用小程序自身实现的。
（2）详情页通过（）方法监听用户上拉触底事件，然后发送请求继续获取数据，达到懒加载的效果。
（3）用户体验优化：在js中将整数评分，比如7分，统一改为7.0分，然后wxml模板判断评分是否为0，显示“尚未评分”。
（4）搜索完成后清空搜索框
因为该方法不能用于获取小程序中的元素，所以它只能通过数据来控制
在data中添加一个属性用于保存搜索框的内容，并与input的value属性进行绑定，当搜索完成或者点击X时，清除该变量，达到清空输入框的效果。
6. 新闻页面
（1）免费聚合头条接口只返回新闻的基本信息，不返回新闻的主体内容。
找了很多新闻界面，但是好像都没有新闻正文，如果谁知道更好的界面，欢迎留言告诉我~
（2）当然你也可以自己爬取新闻网站的数据。
