今天有时间和大家分享下鄙人这段时间对微信小程序的开发心得。
首先,微信小程序对于小白来说,也没有想象的那么难。只要你有JS、HTML、CSS基础,上手真的不难,但是肯定要度娘不离手了,但至少咱可以搞啊,是吧,啊哈~
此处提供本人的电商类的处女作,希望能对猿友们起到帮助~
我呢就是从一个小白开始的,所以刚开始上手的时候,真的是一脸懵逼啊。那怎么办呢?我先分享下学习历程及一点经验:
1.要有H5基础,没有或者不懂,那真的玩不来。`先去补补吧,推荐imooc,有很多不错的全套的基础学习资源。`
2.先安装好编译器。然后到官方网上,仔细的阅读官方文档,真的是很详细,很全面的文档。`(PS:开发中各种不论是网络请求,还是数据存储,亦或者是UI方面的API全都在文档里了,而且都有demo)`
3.搜集一些与你要开发的小程序类别相同的开源项目,先备着。`最好找一些比较新的,旧一些的你看起来会比较吃力,因为很多东西都过时了`
4.开始准备上手,开撸!!!撸的时候就直接撸项目就好,不要去撸个button啊或者image啊什么的这种控件级的demo了。果断撸项目,遇到问题就直接去看你准备好的开源项目,去参考人家的写法。
5.这个时候呢,大体上,一些常规的UI是都可以的了。但是呢,肯定会有一些特别的UI需要实现。这个时候就需要自定义了,对~自定义。可以先百度下``包裹的相当于一个组件。后面用就可以直接``就好啦。
6.UI布局方面呢。说实话之前写OC代码,搭一个普通的页面UI部分的代码也要近百行~~,但是用HTML+CSS真的是爽到爆!一个页面下来可能就十几行的代码,UI创建+布局就搞定了。真的是爽。
7.JS方面,就是放逻辑代码的。和平时的开发代码没太大差别,主要就是一些API的不同而已。看下官方文档,就都懂了,比较简单~
再分享下项目里的一些代码片段,及一些心得吧:
1.先明确小程序的几个文件(.js .json .wxml .wxss)
.js 就是写js代码的文件了
.json 就是负责控制navigation的一些属性的,比如title, color, 等,查看文档会有相关的说明
.wxml 类似HTML。主要写UI代码
.wxss 类似于CSS。主要写布局代码
2.熟悉.js文件中的Page()函数内的生命周期的相关方法。
data:{} 是用来存放成员变量的
onLoad:{} 相当于 iOS的ViewDidLoad
onReady:{} 相当于 ViewWillAppear
onShow:{} 相当于 ViewDidAppear
onHide:{} 相当于 ViewDidDisappear
通过介绍,猿友们应该知道各个方法内,写什么样的代码了吧哈。
基本上,网络请求,成员变量的赋值,或者接收上一级页面传递的值,都是在onLoad方法内做的。
其他文件就没什么需要特别说明的了
3.还有比如上拉加载,下拉刷新,官方也都有提供相应的方法。不需要自定义,除非有特殊需求,一般是够用的了。再有比较难一些的就是数据传递了。
`比如说网络数据的展示流程`
`.js(网络请求->赋值到成员变量)->.wxml({{成员变量}} )`
如果是涉及到布局相关的数据的话,那是不能传递到.wxss文件内的。这样就只能将css代码写到.wxml文件内了,
比如:`demo中personal文件下的.wxml文件中的login类及unlogin类的替换`
就用到保存状态的变量来update页面状态。
可以参考Demo中personal中.wxml的第10行代码
4.搭建UI的时候经常会使用到for循环来遍历数据。
微信也很友好的为我们提供了相应的函数。
比如我们想展示商城中的所有鞋子,那么该数据的json格式大概是shopping_list=[{"id":1, "name":"男鞋", "size":40}, {"id":2, "name":"女鞋", "size":40}, {"id":3, "name":"童鞋", "size":40}, ...]这样。
我们可以这样写此处写你的控件
以上可以参考Demo中cart中.wxml第45行处的代码
最后分享下编译器的一些常规使用
1.每次写完代码后,编译的话,直接使用快捷键command+s
。
2.写项目如果用的服务器还是使用的http
的话,记得点击编译器右上角的详情,勾选上不校验合法域名...这一栏。
3.当项目的页面层级较深时,每次想要编译新写的代码,就要从头进入一次。每次都很浪费时间。这时,你可以点击编译器正上方的普通编译-->添加编译模式-->名称自定义、启动页就设置成你要编译的那个页面;剩余的启动参数及进入场景根据实际需求来设置就好
4.说下下方的控制台console
就是输出一些错误警告及打印;sources是用来断点调试用的;network可以查看到网络请求获取的数据;storage查看本地缓存的数据;appdata见名知意;wxml查看UI层级,更可以动态调试(修改数据,修改css样式,增加css样式等等,自己体会哈)
5.真机调试
的话就需要到微信开发后台去配置应用的id才可以。配置之后必须使用https域名才可以获取数据。
最后最后!!!
谢谢猿友的阅读哈~ 也希望这篇文章能帮到想要学习微信小程序开发的朋友们。可能由于鄙人第一次写小程序,Demo中写满了注释。编码格式也很规范,看起来会很清晰
,如果大家喜欢或者对你有帮助,请留下您的喜欢❤️~
谢谢!!!