两天快速开发一个自己的微信小程序

《两天快速开发一个自己的微信小程序》由会员分享，可在线阅读，更多相关《两天快速开发一个自己的微信小程序（17页珍藏版）》请在金锄头文库上搜索。

1、精选公文范文两天快速开发一个 自己的微信小程序- 悬笔 e各位读友大家好，此文档由网络收集而来，欢迎您下载，谢谢两天快速开发一个自己的微信小程序 - 悬笔 e 绝一写在前面1. 为什么要学小程序开发？ 对于前端开发而言，微信小程序因 为其简单快速、开发成本低、用户流量 巨大等特点，也就成了前端开发工程师 必会的一个技能。2. 先放上我做的小程序欢迎页：这个 logo 是当年念大学给 社团做的logo,苦学了整整一周的PS啊首页：轮播头图，天气，豆瓣电影 正在热映全国城市切换页 天气详情页 地图周边服务豆瓣电影热点新闻更多页面3. 开发准备：有人开玩笑说，会 vue 小程序根本 都不用学：微信小

2、程序虽然是腾讯自己搞的， 但是核心的思想跟 vue 等框架是一样一 样的哦善于搜集精美的小组件： “我们不 生产代码，我们只是代码的搬运工”，善 于找到想要的组件并把他们巧妙优雅的 组装成一个大项目，也算是程序员一项 精选公文范文 2精选公文范文 基本技能了。撸起袖子开干了一. 注册小程序账号，下载 IDE1. 官网注册https:/,并下载IDE。2. 官方文档一向都是最好的学习资 料。注意：注册账号之后会有一个appid,新建 项目的时候需要填上，不然很多功能是 用不了的,比如不能预览,不能上传代 码等等。如果你注册过微信公众号的话,一 定要注意,微信公众号和小程序是两个 账号,二者的 a

3、ppid 也是不同,小程序开 发必须使用小程序的 appid 哦。二. 小程序框架介绍和运行机制1.我们建立了“普通快速启动模板”然后整个项目目录如下：整个项目的启动文件,如注释写的精选公文范文 onlaunch 方法有三大功能，浏览器缓存 进行存和取数据；用登陆成功的回调； 获取用户信息。globalData 是定义整个项目的全局 变量或者常量哦。整个项目的配置文件，比如注册页 面，配置 tab 页，设置整个项目的样式， 页面标题等等；！注意：小程序启动默认的第一个 页面，就是的 pages 中的第一个页面哦小程序的页面组件，有几个页面就 会有几个子文件夹。比如快速启动模板 就有两个页面，i

4、ndex和logs5.打开 index 目录可以看到有三个文件，其实和我们 web 开发的文件是一一对应的。对应；对应；就是 js 文件哦。精选公文范文精选公文范文 一般我们还会给每个页面组件添加 一个.json文件，作为该页面组件的配置 文件，设置页面标题等功能6.双击文件var app = getApp();引入整个项目的文件，用来取期中 的公共变量等信息。如果要使用工具库中的某个方法， 在中导出，然后在需要的页面中 require 即可得到哦。比如，我们要获取豆瓣电影的时候， 我们需要调用豆瓣的api；我们先在中的 gloabData 中定义 doubanBase 然后在中使用即可取到这

5、个值。 当然这些常量你也可以在页面需要 的时候，再用写死的值，但是为了整个 项目的维护，还是建议把这种公用参数 统一写在配置文件中哦。接下来在整个page()中，第一个 data，就是本页面组件的内部数据，会渲 染到该页面的wxml文件中，类似于vue、 精选公文范文react 哦通过 setData 修改 data 数据，驱动页 面渲染一些生命周期函数比如 onload()， onready(), onshow(), onhide()等等，监听页面加载、页面初次 渲染、页面显示、页面隐藏等等更多的可以查官网 API 哦。其中用 的 最 多 的 就 是 onload() 方 法 ， 和 onS

6、hareAppMessage ()方法.wxml 模板的使用。 比如本项目电影页面，就是以最小 的星级评价组件 wxml 当做模板， star 到 movie到movie-list, 级一级的嵌套使 用。页面写好 name 属性；然后 import 引入的时候通过 name 获得即可8.常用的 wxml 标签view， text， icon， swiper， block， scroll-view 等等，这些标签直接查官网文 精选公文范文 6精选公文范文 档即可三. 小程序框架、各个页面以及发布 上线的注意点1.整个框架中的一些注意点 整个 wxml 页面，最底层的标签是 哦。每个页面顶部导航栏

7、的颜色， title 在本页面的 json 中配置，如果没有配置 的话，取中的总配置哦。json 中不能写注释哦，不然会报错 的。路由相关1) 使用跳转 tab 页的话，在中除了 注册 pages 页面，还需要在 tabBar 中注 册 tab 页，才能生效哦。注意：tab最多5个，也就是我们说 的头部或者底部最多 5 个菜单。其他的 页面只能通过其他路由方法打开哦。2)navigateTo 是跳到某个非 tab 页， 比如欢迎页，电影详情页，城市选择页 在中注册后，不能在 tabBar 里注册哦， 精选公文范文 7精选公文范文 不然同样也是不能跳转的哦。3)reLaunch 跳转，新开的页面

8、左上 角是没有退回按钮的，本项目只用了一 次，切换城市的时候哦。页面之间传递参数 参数写在跳转的 url 之中，然后另一 个页面在 onload 方法中的传参 option 接 收到。如下传递和获取 iddata -开头的自定义属性的使用比如 wxml 中我们怎么写 点击的事件对象可以这么取， var postId = ;注意： 大写会转换成小写，带 _符 号会转成驼峰形式事件对象event，和的区别：target 指的是当前点击的组件 和 currentTarget 指的是事件捕获的组件。比如，轮播图组件，点击事件应该 要绑定到 swiper 上，这样才能监控任意 一张图片是否被点击，这时t

9、arget这里指的是image,而 精选公文范文 8精选公文范文currentTarget 指的是 swiper使用免费的网络接口：本项目中用到了和风天气api,腾 讯地图api,百度地图api,豆瓣电影api, 聚合头条新闻 api 等,具体用法可以看各 自官网的接口文档哦,很详细的注意：免费接口是有访问限制的, 所以如果用别人的组件用了这种接口的 话,最好还是自己注册一个新的 key 替 换上哦附上一个免费接口大全：https:/jokermonn/-Api另外还要注意,要把这些接口的域 名配置到小程序的合法域名中,不然也 是访问不了的wxss 有一个坑：无法读取本地资源, 比如背景图片用

10、本地就会报错哦。把本地图片弄成网络图片的几种方 式：上传到个人网站；QQ空间相册等 等也是可以的哦 精选公文范文精选公文范文2.切换城市页面：首页使用 navigateTo 跳转到切换城 市页，由于首页并没有关闭，导致切换 了城市返回来，天气信息还是旧的。正确的处理逻辑如下：1）使用 reLaunch 跳转到切换城市页 面，实质是关闭所有页面打开新的页面 哦。2）切换城市页面，更新公共变量中 城市信息为手动切换的城区，再 switchTab 回到首页，触发首页重新加载。3）首页获取城市信息的时候加一个 判断，全局没有才取定位的，全局有就 用全局的哦。城市列表的滚动和回到顶部基于 scroll-

11、view 组件的 scroll-top 属 性，初始就是 0，滚动就会增加的；点击 回到顶部给它置为 0 即可回到顶部3.天气页 初始化页面，天气显示的逻辑 首先调用小程序的方法获得当前的经纬度，然后调用腾讯地图获得当前的精选公文范文精选公文范文 城市名称和区县名称，并存到公共变量 中，再调用查询天气和空气质量的方法 哦。容错处理城市的名称长短不一，有点名字特 别长，比如巴彦淖尔市这种，需要动态 的获取完整的城市名称；有些偏僻的城市暂时没有天气信 息，我们需要对返回的结果进行判断， 没有信息的需要给用户一个良好的提示 信息。4. 周边-地图服务页面调用百度地图的各种服务，查询酒 店，美食，生活

12、服务三种信息，更多信 息可以看百度地图的文档点击时给被点中的图标加个边框， 数据驱动视图，所以使用一个长度为 3 的数组保存三个图标当前是否被点中的 状态然后 wxml 再根据数据来动态添加class,增加边框样式11精选公文范文精选公文范文5. 豆瓣电影页 电影详情页的预览图片，用小程序 本身的 previewImage 实现。详情页使用onReachBottom()方法， 监控用户上拉触底事件，然后发送请求 继续获得数据，实现懒加载的效果用户体验方面的优化， js 中将整数 评分比如 7 分统一改为分，然后 wxml 模板再判断分数是否为 0 显示“暂无评 分”搜索之后清空搜索框 因为小程

13、序中不能使用 getelementbyId 这种方式获得元素，只能 用数据来控制了在 data 中加一个属性 searchText 来 保存搜索框的内容并和 input 的 value 属 性绑定，搜索完成或者点击 X 时， searchText 变量清空即可实现清空输入 框的效果哦。6. 新闻页面 聚合头条新闻的免费接口，只返回 了新闻的基本信息，新闻的主体内容是 精选公文范文 12没有的哦。我找了好多新闻类的接口，好像都 是没有新闻主体内容的。如果谁知道更 好的接口欢迎留言告诉我哈当然，也可以自己去爬新闻网站的 数据哦.更多页面小程序目前开放外链的功能只是给 公司组织的小程序开放了，个人开

14、发还 是不能使用外链的哦。彩蛋页面，获得用户信息通过(userlnfos, userlnfos);可以获 得登陆小程序的用户的个人信息，可以 发送给后台存到数据库中，方便对用户 进行分析我这里只是存储到浏览器缓存中 哦，最大应该是 10M 缓存；如果用户把 这个小程序从小程序列表中删除掉，就 会清空这个缓存。8.发布注意新版本小程序发布的限制为2M, 般都是图片最占空间，所以尽量使用网 精选公文范文 13精选公文范文 络图片具体怎么把本地图片变成网络图 片，上面有讲哦。在开发者工具上预览测试没问题， 点击上传；网页版小程序个的人中心的 左侧“开发管理”菜单，第三块-开发版本 就有了内容。点击提交，填写小程序相关信息， 就可以提交审核了哦。注意：分类最好填写准确，这样才 能更快的通过审核哦。我这个小程序一 天半时间过审上线的各位读友大家好，此文档由网络收集而来，欢迎您下载，谢谢