• 设为首页
  • 点击收藏
  • 手机版
    手机扫一扫访问
    迪恩网络手机版
  • 关注官方公众号
    微信扫一扫关注
    公众号

从零学前端第十七讲:小程序开发

原作者: [db:作者] 来自: [db:来源] 收藏 邀请

本节课内容

小程序开发

 

主讲人介绍

沁修,葡萄藤技术总监

项目经验丰富,擅长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');

 

这样就完成了我们的第一个上手小页面的开发,更多的细节,依旧希望大家去官方网站查看文档。

以上就是上节课的内容解析啦

“我们相信人人都可以成为一个工程师,现在开始,找个师兄,带你入门,学习的路上不再迷茫。

技能树.IT修真院


鲜花

握手

雷人

路过

鸡蛋
该文章已有0人参与评论

请发表评论

全部评论

专题导读
上一篇:
【福利】微信小程序130个精选Demo合集发布时间:2022-07-18
下一篇:
微信小程序修改单选按钮的默认样式发布时间:2022-07-18
热门推荐
阅读排行榜

扫描微信二维码

查看手机版网站

随时了解更新最新资讯

139-2527-9053

在线客服(服务时间 9:00~18:00)

在线QQ客服
地址:深圳市南山区西丽大学城创智工业园
电邮:jeky_zhao#qq.com
移动电话:139-2527-9053

Powered by 互联科技 X3.4© 2001-2213 极客世界.|Sitemap