在线时间:8:00-16:00
迪恩网络APP
随时随地掌握行业动态
扫描二维码
关注迪恩网络微信公众号
本节课内容 小程序开发
主讲人介绍 沁修,葡萄藤技术总监 项目经验丰富,擅长H5移动项目开发。 专注技术选型、底层开发、最佳代码实践规范总结与推广。 1.小程序的介绍和准备 1.1 什么是小程序 微信之父张小龙是这样描述的: 小程序是一种不需要下载安装就可以使用的应用,它实现了应用触手可及的孟县。用户扫一扫或者搜一下即可打开应用,也体现了用完即走的理念。用户不用关心是否安装太多应用的问题。应用将无处不在,随时可用,但又无需安装卸载。 1.2 它的优势 体验上虽然没法完全媲美原生app,但综合考虑还是有很多优势:省流量省时间;开发成本更低,可以把更多人力物力财力放在运营上,做好内容本身;总体来说相当于一个精简版的app
2.准备工作: 1.注册账号 (https://mp.weixin.qq.com) 2.**邮箱 3.信息登记 4.登录小程序管理后台(不完善好信息是无法发布小程序的) 5.完善小程序信息,绑定开发者(尤其是团队多人开发)
在官网下载安装开发工具 安装完成后就可以登录:微信扫码登录开发者工具,这里选小程序项目,进入小程序本地项目进行管理 新建一个项目:目录自选本地文件夹,AppID就是登录微信开发平台后的设置里能看到的AppID,如果没有ID也可以使用官方的测试号,但这样只能做做简单的本地测试,最后是填上适合的项目名称。
2.上手第一个小程序 新建项目,选择一个空目录,使用普通快速启动模板 然后就可以看到预设的模板和内容了,可以直接查看或者点击编译在手机上扫一扫查看:
接下来了解一下小程序的目录结构: pages index index.js 页面脚本逻辑文件 index.wxml 页面模板文件 index.wxss 页面样式文件 index.json 单个页面的配置信息,比如头部底色,头部title等 utils app.js 全局逻辑 app.json 全局配置信息,包含了小程序的所有页面路径,界面表现,底部tab等基本信息 app.wxss 设置样式 project.config.json 开发工具的配置信息
小程序的启动过程: 打开小程序之前,微信会把小程序的代码包下到本地,然后通过app.json的pages字段知道当前小程序的所有页面路径,写在pages字段的第一个页面就是小程序的首页。然后微信就把首页代码装载进来,渲染出首页。 然后app.js里App的实例onLaunch回调就会执行
来一段简单的实战,为项目增加一个city选择页: 首先添加一个新的页面 1.在pages文件添加新页面文件
2.为city.wxml模板页面添加选择器: picker是一个类似于select的picker组件,bindchange是用于绑定一个change事件的方法,value的值是一个***,range则是表示这个选择器的取值范围。
3.然后在city.js中书写页面逻辑: Page({})是页面的一个实例,data中的数据用于视图绑定,bindPickerChange则是绑定的change事件的函数名。 可以看到,data中的数据可以在页面中被直接绑定使用,在js代码中想要改变data的值也非常简单,使用this.setData就可以了,这里我们传入了一个index***,也就是picker选择器选择了country数组中的元素。通过这样的方法,就可以为页面添加不同的组件。
4.选择之后如果想要将选中的city的值传到其他页面比如首页,那么一般来讲有3种方法: 第一种是将数据存到全局的data中,也就是app.js的data中,这样所有的页面都能取到这些数据。但我们并不推荐这样的用法,就如同我们不推荐使用全局变量都一样。 第二种是将数据带在url路径后作为参数传导:http://local.com/foo?bar=abc。这样的做法在传输复杂数据的时候并不是太合适。 第三种则是使用本地存储,在需要的页面再将其取出就可以了: // 存储 wx.setStorageSync('city', {}); // 取出 wx.getStorageSync('city');
这样就完成了我们的第一个上手小页面的开发,更多的细节,依旧希望大家去官方网站查看文档。 以上就是上节课的内容解析啦 “我们相信人人都可以成为一个工程师,现在开始,找个师兄,带你入门,学习的路上不再迷茫。 |
请发表评论