|
干货就是干货，废话不多说，讲点实用的。
一、开发微信小程序的时候首先要有个大致的框架，就是要做出什么样子的小程序，什么类型的。这个不多讲，大家可以自己拿张纸画画。 设计界面的时候微信提出了一些设计上的要求标准规范，我给总结下主要有这么三点：
1、主次分清：界面上要简洁、清晰，明确每个界面的功能，不能产生过多的冗余，力求节俭，干净。功能单一化最好。比如添加就是添加功能，列表就是列表功能，界面上最好不要过多罗列许多与对应功能无关的按钮、图片、控制逻辑等。
2、界面规范：充分利用微信提供的组件，规范标准化，减少输入，字体的大小和颜色要尽量使用微信提供的标准。
3、页面导航：功能的跳转导航要明确，避免给用户提供过多出口和入口，造成迷失。功能逻辑完成要有友好提示信息。
二、明白整体框架形式，从开发角度来讲分两部分： 逻辑层和视图层。 逻辑层说白了就是代码，视图层就是前台展示的页面形式。比如一个网页，能看到的就是视图层，页面的布局，页面的字体大小，图片大小等，逻辑层就是控制网页跳转，弹出框，数据提取，数据绑定、微信支付等等。
视图层主要分成了三部分，一个是标准视图，就是界面上要放组件的地方，微信给定义了一个文件扩展名，叫：wxml。其实类似于我们网页端的.html文件。 还有一个就是标准视图样式文件，就是格式化标准视图中组件的样式，微信给定义了一个文件扩展名，叫：wxss。其实类似于我们网页端的.css文件。 最后一个是页面配置文件，微信给定义了一个扩展名，叫：.json，这个文件可有可无，一般小型应用，无需使用，默认使用小程序的app.json文件就行，其实就是定义页面中的导航背景、导航字体大小、页面背景色等。
逻辑层就是视图界面上的功能交互，比如点击按钮，刷新列表，获取微信支付功能，所有调用微信api的逻辑统统在逻辑层实现。微信给定义了一个扩展名叫：.js，脚本文件。 微信小程序定义一个页面，或者说大家可以理解的一个可视化的界面，在文件生成的时候，需要名字相同，要做到 aaa.wxml,aaa.wxss,aaa.js,aaa.json类似的样子。
三、微信小程序两个重要函数app()和Page()
app()这个就是代表了小程序的入口，其中可以定义常量、生命周期参数等。说白点就是小程序的配置文件。做过Android开发和苹果开发的都知道有这么一个配置文件，是同样的道理。如果没做过手机开发，学过java和.net的都知道一个web.xml 和webconfig.xml，就类似与这个。
Page()就是代表了一个页面的注册。在逻辑层.js中的展示就是这样的。 Page({ })
页面中的数据绑定和函数事件处理都在这个函数中执行。
四、公共逻辑和视图的使用 开发小程序常用的就是模块化。在逻辑层可以把一些常用的函数调用封装成一个模块，在页面逻辑处理的时候需要使用的时候直接引入就行，微信小程序通过require来控制。
视图层上公共部分比如平时常用网页的head，foot等，微信小程序定义include来插入。 视图层中样式文件可以使用@import导入外联样式表。
五、wxml视图使用语法 数据绑定和逻辑运算在wxml视图文件采用双大引号控制{{ }}。把页面中需要绑定的数据通过{{ }}引用，在逻辑层处理逻辑，最后采用setData推送到视图。 微信小程序定义了常用的逻辑判断和运算，比如if，for等，只不过微信给重新命名了，前面添加了wx(微信的简写)字样，变成了wx:if,wx:for。 在事件处理上，采用了bindtap绑定，首先要给页面对应的组件命名id和事件名称，然后在Page处理事件函数。
六、微信小程序中的组件 组件就是类似于网页上的按钮、下拉列表、图片、复选框、进度条、导航、音视频、地图等。比如view组件就类似于网页中的div，这个东西懂点html的就能明白，只不过微信给重新定义了自己一套东西。使用的时候按照规范套用就行了。
七、微信小程序中常用的api
这个才是核心重点。所有微信api调用都可以直接在页面Page中直接使用。比如上传和下载，手机相机调用，数据本地存储，微信支付，导航跳转，远程网络数据请求等，微信小程序帮助文件已经写的非常详细了，功能参数的设置，返回数据的格式等。以前搞过微信开发的一看就明白，我想第一批微信小程序的产生大部分都是以前搞微信开发的。他们只不过重新把原有的H5样式变换为微信小程序的基本要求，在配置上逻辑层，能够很快做出来产品。 来个简单的例子：
| 
|手机版|小黑屋|微信小程序开发|教程|文档|资源汇总_即速论坛
( 粤ICP备14097199号-1 ) 
窥视卡
雷达卡
发表于 2016-9-30 09:43:47
提升卡
置顶卡
沉默卡
喧嚣卡
变色卡
千斤顶
照妖镜
发表于 2016-11-2 14:41:20
学习，希望能增加见识