写点什么

小程序入坑指南

  • 2019-10-28
  • 本文字数:1703 字

    阅读完需:约 6 分钟

小程序入坑指南

前段时间,手上刚好接手一个小程序的项目,心想之前自学过一段时间的小程序,终于有项目可以练练手了,可惜,万万没想到,加了两个周末的班结果却成了飞机稿。好在有些收获,于是趁思路尚且清晰,先记录下来,以下纯属个人见解。


项目大概是这样的,通过摄像头拍摄个人身份证,并上传资料完成备案。效果如图:


1 帐号

首先,开发小程序,我们需要个开发者账号,这里具体的步骤就不再赘述了。

2 开发语言

小程序框架本身提供了一套描述语言 WXML、WXSS、以及 JavaScript 的逻辑层框架,并在视图层和逻辑层提供了数据传输和事件系统。


视图层(View):主要是用来渲染页面,即 WXML、WXSS;


逻辑层(App Service):处理页面逻辑、调用接口、数据请求。



这里我想重点说一下视图层,我们都知道 HTML+CSS+JS 是 Web 编程的组合,在小程序里,WXML 对应的便是 HTML,WXSS 对应的是 CSS。


比如我们看这样一个页面在小程序里的表现:



可能有些人不太喜欢这样的方式去写 HTML,又或者原先写好的页面,没办法直接沿用到小程序,这里推荐使用工具转译,可以像往常编写 web 一样编写小程序,并且支持项目的导入和导出。


其中编译工具主要是将源码目录下的所有 HTML 文件进行转译,并创建一个 xxx.build 的文件夹,将所有编译好的 WXML 存放到 page 文件夹下面,当然 app.json 的配置文件也会自动创建,根据创建的目录名,将同名的 CSS 文件,重命名为 WXSS 文件,并存放到同名目录中,当 CSS 与文件名不符,则合并不符的 CSS 文件,存放到全局目录的 app.wxss 中。同时,源码目录中的 JS 文件会被忽略,页面级的 JS 会被复制到同名目录中,这个 JS 包括注册页面的 page 函数基础模板。我们还是看图吧!


下面是源码 demo 的目录文件结构:



编译后的目录结构改变:



同时页面上的 html 也会发生变化:



编译后:


3 屏幕适配

小程序自身有一个计量单位 rpx,1rpx=0.5px=1 物理像素,rpx 其实是微信对于 rem 的一种应用规定,或者说一种设计的方案,官方规定屏幕宽度为 20rem,规定屏幕宽为 750rpx。所以在微信小程序中 1rem=750/20rpx,同时设计稿的尺寸推荐使用 750 作为设计稿的标准宽度。

4 样式库

小程序本身提供了一套带交互的样式库 WeUI,官方文档有比较详细的调用和说明,但是并不是所有的样式都是我们想要的,有时候设计师会根据当前的页面来设计需要的样式,比如我们常用的 image、button 都含有默认样式,最直接的办法,是重置默认样式。

5 图片的引用

起初我只尝试通过网络的方式加载图片,但是其实小程序加载图片的方式是有两种的,分别是本地图片和网络图片,但是由于微信小程序本身整体的大小限制在 2M 以内,所以还是建议大家采用网络图片的方式来加载,以减少程序包的大小。


下面我们来看一下具体的实现方法:


目录结构如下,只要图片按正确的方式放入小程序的开发工具的项目中,即可在 wxml 文件中用内联样式或者 image 标签都可以引用本地的图片。



然后,新建个 image 文件夹,然后把图片拷贝到这个目录下。


注意:一定要用你从微信开发工具打开的项目 window 窗口完成新建文件夹和把图片 copy 到这个目录下的这两个步骤:



相对路径去访问图片,可以用 style 样式的方式或者 image 标签。



不能使用 wxml 样式去引用本地的图片,虽然不会报错,但其实是没有效果的。



注意:在手机模拟预览,样式的背景图只能用服务器的图片,不能用本地。

6 媒体组件 Camera

这个项目的主要难点其实是如何在拍照的界面上添加文字和遮罩层,起初我尝试用很多方法,都无法在人体轮廓上面显示所需要的内容,如图,预览界面显示的效果是我想要的,但是手机上却并没有显示对应的内容:



后来我看到报错,同时我查阅了官方文档,原来小程序直接有提供给我们 camera 的组件 cover-view 和 cover-image 可以覆盖在相机界面层上,有一点要注意的是:原生控件 cover-view 作为父容器时,不能使用其他控件嵌套作为子元素,只能使用 cover 类的控件如:cover-view、cover-image,切记!


下面的嵌套方式就能在手机上正常显示所需的提示内容了:



以上都是个人对这次项目的小结,肯定也有更好的方法,希望不吝指教!


本文转载自公众号云加社区(ID:QcloudCommunity)。


原文链接:


https://mp.weixin.qq.com/s/2dipLRNn3d-AUzyDXevi9g


2019-10-28 00:36711

评论

发布
暂无评论
发现更多内容

【操作系统 | Linux】终端切换与帮助命令

计算机魔术师

8月月更

提速 10 倍!深度解读字节跳动新型云原生 Spark History Server

字节跳动数据平台

数据库 spark 数据存储 湖仓一体 数据计算

提质增效两不误,揭秘大型软件团队「价值增长飞轮」|直播回顾

万事ONES

严禁外传,字节跳动2022秋招Java岗位架构师面试题(暂定版)发布

钟奕礼

Java 编程 程序员 后端 java面试

java远程连接ssh的实现

测吧(北京)科技有限公司

Java、

解决方案|电力行业应如何应对数字化转型危机

云智慧AIOps社区

安全 监控 解决方案 智能运维AIOps 故障处理

为什么很多企业一边大规模裁员,又一边招聘?

C++后台开发

后台开发 裁员 音视频开发 互联网大厂 C++开发

书单来了 | 京东 8.31 图书品类日,这些经典书 & 新书不容错过!

图灵教育

程序员 计算机 图书节

设计模式的艺术 第二十三章状态设计模式练习(设计一款纸牌游戏软件,该游戏中用户角色具有入门级、熟练级、高手级和骨灰级4种等级。角色等级与积分对应,胜利增加积分,失败扣除积分。入门级有最基本的游戏功能,熟练级增加胜利积分加倍功能,高手级再增加换牌功能)

代廉洁

设计模式的艺术

测试左移之Sonarqube scanner使用

测吧(北京)科技有限公司

软件测试 SonarQube

共识算法入门

神奇视野

【Django | 开发】中间件配置(记录响应耗时日志)

计算机魔术师

8月月更

如何让你的代码更优雅?

六月的雨在InfoQ

性能 代码优化 优雅 日常开发 8月月更

【刷题之路 | Java & Python】两数之和(暴力枚举&哈希表)

计算机魔术师

8月月更

华为云咨询携手商业伙伴探索咨询业态升级

宇宙之一粟

数字化转型 8月月更

【Django | 安全防护】防止XSS跨站脚本攻击

计算机魔术师

8月月更

荣耀智慧服务百亿曝光扶持计划,具体申请规范来了!

荣耀开发者服务平台

卡片服务 荣耀 honor

数字货币永续合约交易所app系统开发

开发微hkkf5566

软件测试 | 测试开发 | 智能音箱语音交互系统简介与测试初探

测吧(北京)科技有限公司

软件测试、

MobTech 短信验证iOS端SDK API

MobTech袤博科技

ios sdk

【Django | 开发】分离上线环境与开发环境(多settings配置)

计算机魔术师

8月月更

阿里云基于全新 RocketMQ 5.0 内核的落地实践

阿里巴巴云原生

阿里云 RocketMQ 云原生

[译]为什么程序员不应该长期留在一家公司

宇宙之一粟

成长 跳槽 8月月更

万节点规模云服务的 SRE 能力建设

阿里巴巴云原生

阿里云 云原生 SRE 可观测

书单来了 | 京东 8.31 图书品类日,这些经典书 & 新书不容错过!

图灵社区

程序员 计算机 图书节

企业钱包数字资产管理工具API开放对接技术

薇電13242772558

数字资产

软件测试 | 测试开发 | Monkey基本参数介绍

测吧(北京)科技有限公司

软件测试、

华为终端全面上新,做全场景智慧体验时代的引领者

ToB行业头条

送你个低代码福利,错过要再等一年

华为云开发者联盟

云计算 福利 低代码 华为云

深度干货!一篇Paper带您读懂HTAP | StoneDB学术分享会第①期

StoneDB

MySQL HTAP StoneDB 企业号九月金秋榜 实时数据库

【Django | 安全防护】CSRF跨站伪请求和SQL注入攻击

计算机魔术师

8月月更

小程序入坑指南_文化 & 方法_卢文喆_InfoQ精选文章