关于小程序开发入门了解

原创 一只熊的北极 教程 小程序 386阅读 2018-03-14 10:22:59 举报

总计来说,入门小程序开发非常简单,如果你对vue/angular/react/backbone等框架了解其中一种,那么对你来说是非常简单的事!今天我们说一下微信小程序如何开发!
1、在了解html/css的基础上,下载微信web开发者工具!
官方下载地址
下载路劲:

选择自己对应的系统版本下载安装,打开是这样的

2、选择小程序入口新建小程序项目-选择项目路径-填写AppId-填写项目名称

3、这是你会发现项目目录是这样的

关于文件目录子啊这里说明一下:
pages文件夹很明显是存放开发页面和脚本还有样式的
utils文件夹下的util.js我理解为公用的方法申明输出然后可以在开发中直接只用它。类似组件,但是还有一种说法是说用作页面更新(本人不理解),这里就不多说明了!
app.js 是小程序的脚本代码。我们可以在这个文件中监听并处理小程序的生命周期函数、声明全局变量,默认申明了一个app对象在里面
app.json 是对整个小程序的全局配置。我们可以在这个文件中配置小程序是由哪些页面组成,配置小程序的窗口背景色,配置导航条样式,配置默认标题。全部配置如下:

pages
接受一个数组,每一项都是字符串,来指定小程序由哪些页面组成。每一项代表对应页面的【路径+文件名】信息,数组的第一项代表小程序的初始页面。小程序中新增/减少页面,都需要对 pages 数组进行修改。
window
用于设置小程序的状态栏、导航条、标题、窗口背景色。

tabbar
如果我们的小程序是一个多 tab 应用(客户端窗口的底部有tab栏可以切换页面),那么我们可以通过 tabBar 配置项指定 tab 栏的表现,以及 tab 切换时显示的对应页面。tabBar 是一个数组,只能配置最少2个、最多5个 tab,tab 按数组的顺序排序。

其中 list 接受一个数组,数组中的每个项都是一个对象,其属性值如下:

networkTimeout
可以设置各种网络请求的超时时间,全部属性如下:

debug
可以在开发者工具中开启 debug 模式,在开发者工具的控制台面板,调试信息以 info 的形式给出,其信息有Page的注册,页面路由,数据更新,事件触发

project.config.json 这个我就不过多的说明了,作用就是你在工具上做的任何配置都会写入到这个文件,当你重新安装工具或者换电脑工作时,你只要载入同一个项目的代码包,开发者工具就自动会帮你恢复到当时你开发项目时的个性化配置,其中会包括编辑器的颜色、代码上传时自动压缩等等一系列选项

4、接下来我们看一下如果写代码脚本
这里的后缀为.wxml的就相当于html的页面视图
这里的后缀为.wxss的就相当于css
这里的后缀为.js的就是脚本文件
我们给wxml绑定类名去定义它的样式,跟html不一样的是你不需要去link他,小程序开发只要你的名字一样,就会在根目录下自动找到!

看一下index.js

是不是特别熟悉的代码风格和思想,所以接下来我们需要做的就是去看官方api学习他,这里就不啰嗦那么多了!
一键定位学习通道

好了就这样,一起交流学习的可以来开发交流QQ群:565996731(注明:来自前端网)

在最后分享个亿自己的demo,快递物流快捷查询小程序,扫一扫立即体验:

评论 ( 0 )
最新评论
暂无评论

赶紧努力消灭 0 回复