用户
 找回密码
 立即注册

QQ登录

只需一步,快速开始

微信小程序入门干货

  • TA的每日心情
    无聊
    2017-8-15 16:38
  • 签到天数: 42 天

    [LV.5]常住居民I

    732

    主题

    1628

    帖子

    2万

    金钱

    管理员

    论坛管理员

    Rank: 9Rank: 9Rank: 9

    积分
    2455

    突出贡献优秀版主荣誉管理论坛元老

    QQ
    发表于 2016-9-30 09:43:47
    干货就是干货,废话不多说,讲点实用的。

    一、开发微信小程序的时候首先要有个大致的框架,就是要做出什么样子的小程序,什么类型的。这个不多讲,大家可以自己拿张纸画画。
    设计界面的时候微信提出了一些设计上的要求标准规范,我给总结下主要有这么三点:

    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样式变换为微信小程序的基本要求,在配置上逻辑层,能够很快做出来产品。
    来个简单的例子:

    游客,如果您要查看本帖隐藏内容请回复





    上一篇:博卡君的应用号(小程序)开发教程首发第五弹!(0928)
    下一篇:微信小程序安装步骤,及开发尝鲜
    发表于 2016-11-2 14:41:20
    谢谢谢谢谢谢谢谢谢谢
    发表于 2017-8-24 17:15:15
    感谢分享
    使用道具 举报 回复
    发表于 2017-10-4 11:15:16
    辛苦辛苦
    使用道具 举报 回复
    发表于 2017-10-12 10:07:16
    学习,希望能增加见识
    发表于 2017-10-12 10:16:17
    最新喜讯:名爵国际娱乐城 900868.com 安全网上du场,设有彩票 六 合 彩 百 家 乐 龙虎 斗等真人游戏,都可以手机下注,即时提款。首存就送300,各种优惠活动继续执行中。关键是安全有保障!
    发表于 2017-10-12 11:25:38
    求干货啊啊啊啊
    发表于 2017-10-12 11:52:30
    发表于 2017-10-12 13:17:40
    谢谢楼主的分享。
    发表于 2017-10-12 14:50:08
    感谢分享
    使用道具 举报 回复
    12下一页
    发新帖
    您需要登录后才可以回帖 登录 | 立即注册
    咫尺网络 - 小程序开发论坛
    X