算是微信小程序的入门
分类:彩世界官方下载-Web前端

微信小程序,在2017年内,从刚出来的持续质疑声,到现在的越趋成熟;如果您现在还不会玩小程序或者不了解的话,是不是说不过去了呢。

前段时间,因项目需求,接到“上级命令”需要给部门童鞋们普及下微信小程序的技术知识点,花了差不多2天时间准备了一份PPT,算是微信小程序的入门,此时此刻分享出来给大家,希望还没了解过的或者不熟悉的童鞋,一起来学习下吧。

大家的微信里经常会收到这样的消息,说明XXX网站的微信小程序已经上线了。

据说体验差得要命的12306订票系统近期居然要出上线小程序了,这个对于假期出去旅游和回家的朋友,绝壁是个好消息。

为什么要开发微信小程序?

我们需要了解微信小程序和H5的区别,也就是小程序的优势所在,个人总结主要是以下四点:

4、微信里聊天和查看小程序两不误

在开发一个微信小程序的前期,我们需要做哪些方面的准备工作呢?

准备工作1、设置管理

你想做一个微信小程序,微信公众号是需要搞一个的,进入

不过这里要提醒大家的是,在“开发设置”的选项里有个appID,这个是我们要记住的,它有啥用?小程序的AppID的作用是为了方便在终端设备测试,如果没有的话只能在PC上测试效果,大家在具体项目中试着测试项目便知晓。

2、用户身份

开发一个微信小程序,你需要一个小团队,把你的老大、设计师、产品,测试童鞋拉进来,然后你可以设置每个人的相关权限,便于体验测试。

这个是比较简单的呢,大家可以根据相关提示进行设置咯,不过在设置期间,会让你扫描二维码确认信息。

3、开发工具下载

微信web开发者工具,下载地址:

最新版本的界面相对于旧版本,面目全非,脱胎换骨,不过基础功能基本一样。

4、微信小程序尺寸单位

1) 微信小程序附有自己专属的尺寸单位rpx,可以根据屏幕宽度进行自适应。规定屏幕宽为750rpx。如在 iPhone6 上,屏幕宽度为375px,共有750个物理像素,则750rpx = 375px = 750物理像素,1rpx = 0.5px = 1物理像素。

2) 微信小程序也支持rem尺寸单位,rem和rpx的换算关系。rem: 规定屏幕宽度为20rem;1rem = 建议:开发微信小程序时设计师可以用 iPhone6 作为视觉稿的标准。1rpx = 1px。

5、文件类型

微信小程序主要有四种文件类型:

.json 后缀的 JSON 配置文件

.wxml 后缀的 WXML 模板文件

.wxss 后缀的 WXSS 样式文件

.js 后缀的 JS 脚本逻辑文件

这四点后面会详细介绍。


OK,准备工作大概就这么多了,当然了,还有很多细节,这里不可能一一写出来,需要大家在项目开发中慢慢去摸索,u also can 加入我们的前端群:295431592,一起去学习。

准备工作完毕,进入微信小程序演示环节。

演示

接下来我们对于微信小程序一些界面进行演示:

页面视觉

首先我们一起来看下一个微信小程序的基本界面,如下图:

主要分为“头部”,“主体”,“底部”三部分,其中头部和底部是微信小程序自带,也就是说不能改变其框架,只能改变其中的图标、背景、字体颜色等;中间的开发区域才是我们的地盘,你可以为所欲为,但是你也不能“出轨“,因为微信小程序会有些规定的,后续之。

微信小程序头部和底部在安卓和IOS里的表现形式有些不同,如下图:

比如头部的返回按钮、标题位置;还有底部的图文混排的上下间距会有些不同,安卓里体验会好些。这些细节的东西,在前端开发的时候,需要跟设计师等其他人解释清楚,因为目前这些我们是无法去修改的。

开发工具界面

以上就是微信开发工具的主界面,

因功能和按钮比较多,在演讲的时候,我基本是演示操作一些主要功能,个人觉得还是比较简单的,这里就啰嗦了,不懂的你可以加群了解。

标签

微信小程序的标签跟我们平时做其他项目有些不同,它自带一些专属标签。比如:

viewtextblockimagenavigator...

更多的标签,我们可以去参考:

WXSS选择器

微信小程序目前支持的选择器:

跟我们日常的CSS基本一样,略之。

代码配置:1、小程序配置 app.json

app.json 是对当前小程序的全局配置,包括了小程序的所有页面路径、界面表现、网络超时时间、底部 tab 等。下面是我一个微信小程序项目的相关配置:

{"pages":["pages/index/index","pages/hangq/index","pages/activity/index","pages/login/index","pages/logs/logs","pages/succ/index"],"window":{"backgroundTextStyle":"light","navigationBarBackgroundColor":"#1B82D2","navigationBarTitleText":"基准汇率","navigationBarTextStyle":"#ffffff"},"tabBar":{"color":"#797979","selectedColor":"#1B82D2","borderStyle":"#E6E6E6","backgroundColor":"#fff","list":[{"pagePath":"pages/index/index","iconPath":"images/data-foot-i1.png","selectedIconPath":"images/data-foot-i1o.png","text":"基准汇率"},{"pagePath":"pages/hangq/index","iconPath":"images/data-foot-i2.png","selectedIconPath":"images/data-foot-i2o.png","text":"外汇行情"},{"pagePath":"pages/activity/index","iconPath":"images/data-foot-i3.png","selectedIconPath":"images/data-foot-i3o.png","text":"外汇开户"}]},"debug":true}

pages - 配置项目页面的地址列表;

window - 配置小程序头部的元素属性,分别为:是否加粗、背景、标题文字,文字颜色;

tabBar - 配置小程序底部的元素属性,分别为:文字颜色、选中文字颜色、顶部线的颜色、背景,以及按钮和文字的图文混排的信息。

2、WXML 模板

这个跟HTML很相似,只是标签换了而已,可以看下一段代码:

恭喜您,开户成功!账号:300305490密码:J65323软件下载链接已发至手机短信激活立即享受200美元开户赠金

3、WXSS 样式

WXSS 具有 CSS 大部分的特性,小程序在 WXSS 也做了一些扩充和修改,建议更多的使用flexbox,使用rpx单位等。

4、JS 交互逻辑

一个服务仅仅只有界面展示是不够的,还需要和用户做交互:响应用户的点击、获取用户的位置等等。在小程序里边,我们就通过编写 JS 脚本文件来处理用户的操作。微信小程序的里JS写法跟我们日常有些不同,看下代码:

//pages/login/index.jsPage({data:{tip:'',userName:'',phoneNumber:'',mailName:''},formBindsubmit:function{varpatten=newRegExp*@;varregtel=newRegExp('(^1[3|4|5|7|8][0-9]{9}$)','g');if(e.detail.value.userName.length==0){this.setData({tip:'请输入正确的用户名!',})}elseif(e.detail.value.phoneNumber.length==0){this.setData({tip:'请输入手机号码!',})}elseif(e.detail.value.phoneNumber.length!=11){this.setData({tip:'手机号码必须是11位数字哟!',})}elseif(e.detail.value.mailName.length==0){this.setData({tip:'请输入正确的邮箱!',})}else{wx.navigateTo({url:'/pages/succ/index'})this.setData({tip:'信息正确',})}}})

这个是一段很简单的表单验证代码,功能不全,意在体现书写格式,仅供参考。

模块化

微信小程序的公用模块的调用,跟我们日常使用的有些不同:

WXSS: @import "common.wxss";

WXML:

大家在项目中注意下就没啥问题了,这个比较容易理解的。

微信小程序官方设计规范

每一款产品都会有自己的一套规范,当然你是否遵守这些条条框框,因人而异吧。分享中也没有说很多,提供两个了地址:

大家自己下去好好研究下。

案例分析

在分享过程中,我准备了一些案例,你可以点击下载:DEMO。然后在开发工具中打开看下效果。

爬坑

刚开始玩微信小程序的时候踩过一些坑,在分享过程中列举了一些,贴出来提醒大家误入歧途吧,^_^。

1、添加外部字体方法

@font-face{font-family:'字体名称';src:url("../../resources/font/UKIJTuzTom.ttf");font-weight:normal;font-style:normal;}

经测试,不管是本地还是外网的路径,在小程序里无作用。需要使用base64编码。在线生成base64编码方法:

src:url(data:application/font-woff2;charset=utf-8;base64....

如果不会弄,加群问吧。

2、image的使用

background-image:url

在小程序里无效果,需要转化成base64编码。-----------------------------------------------------// Base64 在WXSS中的使用

.box{background-image:url("data:image/jpg;base64,/9j/4Q...");}

// Base64 在WXML中的使用

3、改变表单placeholder默认颜色

日常改变默认输入框颜色方法input::-webkit-input-placeholder在小程序里不支持的,需要用以下方法:input中加入属性:placeholder-style="color:#BCBCBC"或者placeholder-class=" 样式名"

4、底部导航

tabBar 是一个数组,只能配置最少2个、最多5个tab,tab 按数组的顺序排序。

5、页面预览深度

微信小程序的页面路径限制为最多5层,多于5层的页面将不会跳转并且会抛出错误信息。而我们产品的某些业务场景不止存在5层的页面路径,在这种情况下,我们不得不牺牲一定的用户体验,以保证功能的完整。所以在产品策划的时候需要注意页面之间的交互,尽量在5层交互内完成流程。演示案例:7five

6、jQuery库

zepto/jQuery 会使用到window对象和document对象,在微信小程序里不支持的,所以无法使用。在平时的交互中,使用微信规范的写法or原生的javascript实现效果。‘

7、资源利用

尽量避免大图片和长列表图片,这两种情况都有可能导致内存占用上升,掉帧卡顿。2)代码包大小:

小程序一开始时代码包限制为1MB,后面增加到增加到 2MB 。代码包上限的增加对于开发者来说,能够实现更丰富的功能,但对于用户来说,也增加了下载流量和本地空间的占用。3)setData

数据的处理,这个内容比较多,进一步了解看下官方文档。

总结

OK,本次微信小程序的分享基本就是这些内容,因为时间只给了1小时,所以有些功能和技术点只是大概提了下,没有深入的去讲解,这个需要大家在具体项目中慢慢体验和研究吧。

本文由彩世界开奖发布于彩世界官方下载-Web前端,转载请注明出处:算是微信小程序的入门

上一篇:如果你要使用jQuery包装后的方法或属性就要$ 下一篇:没有了
猜你喜欢
热门排行
精彩图文