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

精选公文范文两天快速开发一个 自己的微信小程序- 悬笔 e各位读友大家好，此文档由网络收集而来，欢迎您下载，谢谢两天快速开发一个自己的微信小程序 - 悬笔 e 绝一写在前面1. 为什么要学小程序开发？ 对于前端开发而言，微信小程序因 为其简单快速、开发成本低、用户流量 巨大等特点，也就成了前端开发工程师 必会的一个技能。2. 先放上我做的小程序欢迎页：这个 logo 是当年念大学给 社团做的logo,苦学了整整一周的PS啊首页：轮播头图，天气，豆瓣电影 正在热映全国城市切换页 天气详情页 地图周边服务豆瓣电影热点新闻更多页面3. 开发准备：有人开玩笑说，会 vue 小程序根本 都不用学：微信小程序虽然是腾讯自己搞的， 但是核心的思想跟 vue 等框架是一样一 样的哦善于搜集精美的小组件： “我们不 生产代码，我们只是代码的搬运工”，善 于找到想要的组件并把他们巧妙优雅的 组装成一个大项目，也算是程序员一项 精选公文范文 2精选公文范文 基本技能了。撸起袖子开干了一. 注册小程序账号，下载 IDE1. 官网注册https:/,并下载IDE。2. 官方文档一向都是最好的学习资 料。注意：注册账号之后会有一个appid,新建 项目的时候需要填上，不然很多功能是 用不了的,比如不能预览,不能上传代 码等等。如果你注册过微信公众号的话,一 定要注意,微信公众号和小程序是两个 账号,二者的 appid 也是不同,小程序开 发必须使用小程序的 appid 哦。二. 小程序框架介绍和运行机制1.我们建立了“普通快速启动模板”然后整个项目目录如下：整个项目的启动文件,如注释写的精选公文范文 onlaunch 方法有三大功能，浏览器缓存 进行存和取数据；用登陆成功的回调； 获取用户信息。globalData 是定义整个项目的全局 变量或者常量哦。整个项目的配置文件，比如注册页 面，配置 tab 页，设置整个项目的样式， 页面标题等等；！注意：小程序启动默认的第一个 页面，就是的 pages 中的第一个页面哦小程序的页面组件，有几个页面就 会有几个子文件夹。比如快速启动模板 就有两个页面，index和logs5.打开 index 目录可以看到有三个文件，其实和我们 web 开发的文件是一一对应的。对应；对应；就是 js 文件哦。精选公文范文精选公文范文 一般我们还会给每个页面组件添加 一个.json文件，作为该页面组件的配置 文件，设置页面标题等功能6.双击文件var app = getApp();引入整个项目的文件，用来取期中 的公共变量等信息。如果要使用工具库中的某个方法， 在中导出，然后在需要的页面中 require 即可得到哦。比如，我们要获取豆瓣电影的时候， 我们需要调用豆瓣的api；我们先在中的 gloabData 中定义 doubanBase 然后在中使用即可取到这个值。 当然这些常量你也可以在页面需要 的时候，再用写死的值，但是为了整个 项目的维护，还是建议把这种公用参数 统一写在配置文件中哦。接下来在整个page()中，第一个 data，就是本页面组件的内部数据，会渲 染到该页面的wxml文件中，类似于vue、 精选公文范文react 哦通过 setData 修改 data 数据，驱动页 面渲染一些生命周期函数比如 onload()， onready(), onshow(), onhide()等等，监听页面加载、页面初次 渲染、页面显示、页面隐藏等等更多的可以查官网 API 哦。其中用 的 最 多 的 就 是 onload() 方 法 ， 和 onShareAppMessage ()方法.wxml 模板的使用。 比如本项目电影页面，就是以最小 的星级评价组件 wxml 当做模板， star 到 movie到movie-list, 级一级的嵌套使 用。页面写好 name 属性；然后 import 引入的时候通过 name 获得即可8.常用的 wxml 标签view， text， icon， swiper， block， scroll-view 等等，这些标签直接查官网文 精选公文范文 6精选公文范文 档即可三. 小程序框架、各个页面以及发布 上线的注意点1.整个框架中的一些注意点 整个 wxml 页面，最底层的标签是 哦。每个页面顶部导航栏的颜色， title 在本页面的 json 中配置，如果没有配置 的话，取中的总配置哦。json 中不能写注释哦，不然会报错 的。路由相关1) 使用跳转 tab 页的话，在中除了 注册 pages 页面，还需要在 tabBar 中注 册 tab 页，才能生效哦。注意：tab最多5个，也就是我们说 的头部或者底部最多 5 个菜单。其他的 页面只能通过其他路由方法打开哦。2)navigateTo 是跳到某个非 tab 页， 比如欢迎页，电影详情页，城市选择页 在中注册后，不能在 tabBar 里注册哦， 精选公文范文 7精选公文范文 不然同样也是不能跳转的哦。3)reLaunch 跳转，新开的页面左上 角是没有退回按钮的，本项目只用了一 次，切换城市的时候哦。页面之间传递参数 参数写在跳转的 url 之中，然后另一 个页面在 onload 方法中的传参 option 接 收到。如下传递和获取 iddata -开头的自定义属性的使用比如 wxml 中我们怎么写 点击的事件对象可以这么取， var postId = ;注意： 大写会转换成小写，带 _符 号会转成驼峰形式事件对象event，和的区别：target 指的是当前点击的组件 和 currentTarget 指的是事件捕获的组件。比如，轮播图组件，点击事件应该 要绑定到 swiper 上，这样才能监控任意 一张图片是否被点击，这时target这里指的是image,而 精选公文范文 8精选公文范文currentTarget 指的是 swiper使用免费的网络接口：本项目中用到了和风天气api,腾 讯地图api,百度地图api,豆瓣电影api, 聚合头条新闻 api 等,具体用法可以看各 自官网的接口文档哦,很详细的注意：免费接口是有访问限制的, 所以如果用别人的组件用了这种接口的 话,最好还是自己注册一个新的 key 替 换上哦附上一个免费接口大全：https:/jokermonn/-Api另外还要注意,要把这些接口的域 名配置到小程序的合法域名中,不然也 是访问不了的wxss 有一个坑：无法读取本地资源, 比如背景图片用本地就会报错哦。把本地图片弄成网络图片的几种方 式：上传到个人网站；QQ空间相册等 等也是可以的哦 精选公文范文精选公文范文2.切换城市页面：首页使用 navigateTo 跳转到切换城 市页，由于首页并没有关闭，导致切换 了城市返回来，天气信息还是旧的。正确的处理逻辑如下：1）使用 reLaunch 跳转到切换城市页 面，实质是关闭所有页面打开新的页面 哦。2）切换城市页面，更新公共变量中 城市信息为手动切换的城区，再 switchTab 回到首页，触发首页重新加载。3）首页获取城市信息的时候加一个 判断，全局没有才取定位的，全局有就 用全局的哦。城市列表的滚动和回到顶部基于 scroll-view 组件的 scroll-top 属 性，初始就是 0，滚动就会增加的；点击 回到顶部给它置为 0 即可回到顶部3.天气页 初始化页面，天气显示的逻辑 首先调用小程序的方法获得当前的经纬度，然后调用腾讯地图获得当前的精选公文范文精选公文范文 城市名称和区县名称，并存到公共变量 中，再调用查询天气和空气质量的方法 哦。容错处理城市的名称长短不一，有点名字特 别长，比如巴彦淖尔市这种，需要动态 的获取完整的城市名称；有些偏僻的城市暂时没有天气信 息，我们需要对返回的结果进行判断， 没有信息的需要给用户一个良好的提示 信息。4. 周边-地图服务页面调用百度地图的各种服务，查询酒 店，美食，生活服务三种信息，更多信 息可以看百度地图的文档点击时给被点中的图标加个边框， 数据驱动视图，所以使用一个长度为 3 的数组保存三个图标当前是否被点中的 状态然后 wxml 再根据数据来动态添加class,增加边框样式11精选公文范文精选公文范文5. 豆瓣电影页 电影详情页的预览图片，用小程序 本身的 previewImage 实现。详情页使用onReachBottom()方法， 监控用户上拉触底事件，然后发送请求 继续获得数据，实现懒加载的效果用户体验方面的优化， js 中将整数 评分比如 7 分统一改为分，然后 wxml 模板再判断分数是否为 0 显示“暂无评 分”搜索之后清空搜索框 因为小程序中不能使用 getelementbyId 这种方式获得元素，只能 用数据来控制了在 data 中加一个属性 searchText 来 保存搜索框的内容并和 input 的 value 属 性绑定，搜索完成或者点击 X 时， searchText 变量清空即可实现清空输入 框的效果哦。6. 新闻页面 聚合头条新闻的免费接口，只返回 了新闻的基本信息，新闻的主体内容是 精选公文范文 12没有的哦。我找了好多新闻类的接口，好像都 是没有新闻主体内容的。如果谁知道更 好的接口欢迎留言告诉我哈当然，也可以自己去爬新闻网站的 数据哦.更多页面小程序目前开放外链的功能只是给 公司组织的小程序开放了，个人开发还 是不能使用外链的哦。彩蛋页面，获得用户信息通过(userlnfos', userlnfos);可以获 得登陆小程序的用户的个人信息，可以 发送给后台存到数据库中，方便对用户 进行分析我这里只是存储到浏览器缓存中 哦，最大应该是 10M 缓存；如果用户把 这个小程序从小程序列表中删除掉，就 会清空这个缓存。8.发布注意新版本小程序发布的限制为2M, 般都是图片最占空间，所以尽量使用网 精选公文范文 13精选公文范文 络图片具体怎么把本地图片变成网络图 片，上面有讲哦。在开发者工具上预览测试没问题， 点击上传；网页版小程序个的人中心的 左侧“开发管理”菜单，第三块-开发版本 就有了内容。点击提交，填写小程序相关信息， 就可以提交审核了哦。注意：分类最好填写准确，这样才 能更快的通过审核哦。我这个小程序一 天半时间过审上线的各位读友大家好，此文档由网络收集而来，欢迎您下载，谢谢