首页

微信小程序知识体系梳理

seo达人

如果您想订阅本博客内容,每天自动发到您的邮箱中, 请点这里 

小程序介绍

17年一月9号,小程序刚发布的时候,个人很幸运的成为第一批吃螃蟹的人,当然也是第一批采坑的人。

小程序是基于微信的一种应用,使用微信自定义的组件,让我们使用JavaScript的方式,达到匹配原生应用的效果。小程序的一大优势就是,你只要有个微信,你就能搜索你所需要的点餐、买票、旅游等一些日常需求的小程序,而且——用完即毁、无需下载。

小程序开发所需要的技能

小程序是最适合前端开发人员,你所需的知识仅仅是JavaScript、css、html的基本知识,如果你有其他单页面应用的开发经验,那小程序会很快上手,但是这都不是必须的。

小程序的知识体系的梳理

项目整体架构

app.js 小程序的启动js文件。

app.json 小程序的全局json配置文件。同时也可以进行pages配置、底部tab切换的配置等等。

app.wxss 小程序的全局样式。

pages 小程序的相关页面。在app.json中配置了pages,pages文件夹就会自动出现对应的页面。

pages

js 是小程序的逻辑部分。 
wxss 小程序的对应page的布局,也就是局部样式。相当于web网页的css。 
wxml 页面布局。相当于web网页的html。 
json 小程序的局部页面配置。

小程序路由

1、push路由 
wx.navigateTo({ 
url:’/pages/index/index’ 
});

2、替换路由 
wx.redirectTo({ 
url:”/pages/index/index” 
});

3、路由回退 
wx.navigateBack({ 
delta: 1 
});

4、tab切换 
wx.switchTab({ 
url:’相关页面路径’ 
});

5、路由清理替换 
wx.reLaunch({ 
url:’新的页面路径’ 
});

小程序路由传参

wx.navigateTo({ 
url: “/pages/index/index?id=”+inputValue 
}); 
就会把inputValue的值传递过去。在相应的界面的onLoad周期函数的options中接收。

//index.js 
onLoad: function(options){ 
console.log(options.id); 
}

小程序界面交互(Toast、Modal)

Toast分三种:sucess、loading、none; 
Modal:title、content属性是必须要的。 
modal还有一些其他的属性,比如确认按钮的显示。

小程序page的生命周期

onLoad——初始化加载一次 
onReady——页面初次渲染完成 
onShow——监听页面显示 
onHide——监听页面隐藏 
onUnload——监听页面卸载

生命周期函数的本质:给开发人员一个触发时机的暴露的接口。在这样的时机下,我们可以做什么?

小程序如何更改data

vue中:this.message = ‘hello world’; 
小程序中: 
this.setData({ 
message: ‘hello world’ 
})

小程序分享功能

使用onShareAppMessage函数可以实现分享转发功能。 
onShareAppMessage: function(){ 
return { 
title:’图吧同行’, 
path:’/pages/index/index’, 
desc:’描述信息’ 

}

登录功能

小程序的登录是一个项目的核心逻辑。分为三步。

第一步:wx.login,获取code。 
第二步:把code发送给我们的后台服务器,得到openId。 
第三步:服务器把openId返回给你。你就知道每次是哪一个用户登录了小程序。

蓝蓝设计www.lanlanwork.com )是一家专注而深入的界面设计公司,为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 平面设计服务


关于placeholder();

seo达人

如果您想订阅本博客内容,每天自动发到您的邮箱中, 请点这里 

搜索框有一些提示信息比如“关键字”之类,不写吧用户可能不知道这个搜索框是用来做什么的,写了吧点击搜索之后默认就把这些提示信息提交给数据处理页面处理去了,有点麻烦,而且也没有必要再去数据库查一次这个提示信息。

  可以用jquery 的插件 placeholder来解决这个问题,这个插件使用也很简单,在页面引入这个插件,    <script type="text/javascript" src="<%=basePath %>resources/scripts/jquery/jquery.placeholder.min.js"></script>(本人用的是miniui做的,所以引入的是jquery.placeholder.min.js)。

 在html中的输入框中如此设置

<div class="inputs">
         <input id="u_id" name="u_id" type="text" placeholder="请输入帐号"/>
 </div>
<div class="inputs">
     <input id="u_pass" name="u_pass" type="password" placeholder="请输入密码"/>
</div>

 js代码:

$(function(){
    $("input").placeholder();
    
    $("input").keydown(function(event) {  
        //alert(event.keyCode);
        if(event.keyCode==13){  
            login();  //转到登录的js方法
        }
    });
});

 但是问题来了,firefox,IE下都能实这个效果,chrome和safari点击后不会消失,得输入东西之后才会消失。本人在CSS方面菜鸟一只,后来让公司一位前段的同事去调试这个,最后在CSS里面加了一段:

input:focus::-webkit-input-placeholder,textarea:focus::

-webkit-input-placeholder{color:transparent;} 

蓝蓝设计www.lanlanwork.com )是一家专注而深入的界面设计公司,为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 平面设计服务


干货 | 2018年UI设计师如何自我提升设计力?

蓝蓝设计的小编

提升设计能力是每位设计师的愿望。在兴元君看来,要想提高设计力,首先需要有发现作品问题的能力

会员成长体系2.0-从通感到通识的体验打造

鹤鹤

将会员全链路场景中的服务触点进行统一的感知设计,并在服务中为用户传递一致的体感,此所谓通感。 将升级带来的行为变化用数据反映出来,结合数据去调整设计表现,通过设计迭代再次影响用户的行为,最终与用户在认知方面达成共识。此乃通识。

学习解析XML(1)

seo达人

如果您想订阅本博客内容,每天自动发到您的邮箱中, 请点这里

什么是xml, xml有什么作用?
XML 是独立于软件和硬件的信息传输工具
  • XML 指可扩展标记语言(EXtensible Markup Language)。
  • XML 是一种很像HTML的标记语言。
  • XML 的设计宗旨是传输数据,而不是显示数据。
  • XML 标签没有被预定义。您需要自行定义标签。
  • XML 被设计为具有自我描述性。
  • XML 是 W3C 的推荐标准。


XML 和 HTML 之间的差异

XML 不是 HTML 的替代。

XML 和 HTML 为不同的目的而设计:

  • XML 被设计用来传输和存储数据,其焦点是数据的内容。
  • HTML 被设计用来显示数据,其焦点是数据的外观。

HTML 旨在显示信息,而 XML 旨在传输信息



xml的用途:

    

XML 把数据从 HTML 分离

XML 简化数据共享

XML 简化数据传输

XML 简化平台变更

XML 使您的数据更有用

XML 用于创建新的互联网语言


<?xml version="1.0" encoding="UTF-8"?> 声明

以及根元素 子元素 以及定义根元素结尾

如例

声明

<?xml version="1.0" encoding="UTF-8"?>

根元素

<note>

子元素

<to>Tove</to>

<from>Jani</from>

<heading>Reminder</heading>

<body>Don't forget me this weekend!</body>

</note>

定义根元素结尾

命名的规范

所有的 XML 元素都必须有一个关闭标签

XML 标签对大小写敏感、

XML 必须正确嵌套

XML 属性值必须加引号

实体引用




XML 以 LF 存储换行

在 Windows 应用程序中,换行通常以一对字符来存储:回车符(CR)和换行符(LF)。

在 Unix 和 Mac OSX 中,使用 LF 来存储新行。

在旧的 Mac 系统中,使用 CR 来存储新行。

XML 以 LF 存储换行。

蓝蓝设计www.lanlanwork.com )是一家专注而深入的界面设计公司,为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 平面设计服务

小身材,大影响。你应该知道的图标基础知识

涛涛

如今的用户界面中,图标绝对是不可或缺的元素。虽然绝大多数的图标都很小,甚至不被人注意到,但是它们帮助设计和用户解决了许多问题。图标是可用性和导航的关键,用户能够感知到图标的功用,但是只有设计师才会明白,想要让图标简约、可用还富有表现力,要耗费多少时间和精力。

乔布斯曾经说过:“细节至关重要,花费时间仔细打磨是值得的。”图标是现如今UI界面中可用性和导航体系的核心组件,所以,今天的文章,我们来仔细归纳一下常见的图标类型和它们在UI中的使用。

高手经验!Facebook的360全景VR应用设计总结

涛涛

FB设计团队设计的一款Gear VR(三星VR设备)平台的全景应用过程总结,其中包含一些很有价值的VR实战经验与设计原则。

FB的Immersive设计团队致力于提升人们身临其境的体验。我们相信脱离了传统的“容器”来讲述和体验故事可以让人们与情景和彼此更深入的联结。

我们已经在各个平台搭建了360度全景照片与视频服务,目前在FB上已经有超过2500万张360全景照片和100万个全景视频。尽管有如此多的全景内容,然而用户还是很容易在feed流中错过这些内容。

Facebook 360介绍

过去的几个月,我一直为下一步进行设计:给予三星Gear VR平台的Facebook 360应用——使全景照片和视频更容易被发现。这是FB第一个为Gear VR做的媒体应用,一个通过VR浏览360全景照片和视频的平台。

汉堡图标不好使?这5个替代方案帮你搞定移动端导航

涛涛

对于设计师而言,移动端设备屏幕上的每一寸空间都是宝贵的资源。为了在小屏幕上做更多的事情,设计师在设计导航系统的时候,通常需要花费更多的时间来打磨。汉堡图标在过去几年当中,是最常见的一种设计策略,导航和选项被隐藏在这个小小的图标之后,但是实际上,虽然大众已经习惯了它的存在,但是它并不是最佳的导航设计方案。

在今天的文章当中,我们会探讨为什么汉堡菜单这样的隐藏式导航影响用户体验,以及可用性更强的替代方案。

为何汉堡图标会破坏用户体验

在移动端设备上,我们看到的可见式导航其实比汉堡图标这样的隐藏式导航更多,前者大概是后者的2.5倍。

“思维框架”理论,让我们更好地决策和解决问题。

涛涛

相信很多体验设计师在与产品需求方进行设计提案的时候会遇到这样的情景:

  • 你阐述自己的设计推导过程,从产品目标分析、问题定位、设计目标分析、设计思路阐述这样的推导下来,在场的产品经理们都点头,表达认可。
  • 但是!当到了设计方案环节,你把方案放出来,各位就七嘴八舌挑战了:¥#@%&*&*
  • 这时候经常会听到这样一句话:“有没有其他更好的方案啊?”
  • 这时候你是不是会想,我前面的推导和演绎过程那么完美那么富含逻辑,推导的肯定是最好的方案啦!

但是哦,这个时候,你还是会感觉没底气说出这句话来。

于是你最后说出一句妥协的话“好的好的,我回去改一下。”(各位老板我都听你们的,你们说啥就是啥)

专业度呢?设计价值呢?你的玻璃心要碎了:死了产品经理们会不会觉得自己很水很不专业。

怎么办?这就是今天想聊聊的主题:“思维框架”理论,让我们更好地决策和解决问题。


日历

链接

个人资料

蓝蓝设计的小编 http://www.lanlanwork.com

存档