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

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