微信小程序初体验(上)- 腾讯ISUX社交用户体验设计成员出品

简介:   微信小程序开放公测后一直很火,作为腾讯ISUX社交用户体验设计成员自然不能错过这样的好戏,下面就随ytkah一起来看看“小程序官方评测”吧,write by 腾讯ISUX练小习。 这段时间有幸加入了一个关于微信小程序的项目开发组,从无到有的根据文档自行学习了小程序的开发过程,前面已经有几位前辈的文章珠玉在前,我这里就先从前端界面的开发方面谈一谈小程序以及我所遇到的问题吧。

  微信小程序开放公测后一直很火,作为腾讯ISUX社交用户体验设计成员自然不能错过这样的好戏,下面就随ytkah一起来看看“小程序官方评测”吧,write by 腾讯ISUX练小习。

这段时间有幸加入了一个关于微信小程序的项目开发组,从无到有的根据文档自行学习了小程序的开发过程,前面已经有几位前辈的文章珠玉在前,我这里就先从前端界面的开发方面谈一谈小程序以及我所遇到的问题吧。

在结构和样式方面,小程序提供了一些常用的标签与控件,比如:

view,小程序主要的布局元素,类似于html标签的div,你也完全可以像控制div那样去控制view。

scroll-view,你要滚动内容的话,没必要用view去做overflow,scroll-view提供了更为强大的功能,通过参数的调整,你可以控制滚动方向,触发的事件等等

demo

demo

swiper,滑块视图容器,对于新手来说,再也不用为选用哪个滚动插件伤脑筋了

demo

icon,小程序提供了多种图标供你直接使用

demo
demo

text,文本,唯一可以通过长按被选中内容的一个组件。

progress,进度条

demo
demo

button 按钮,尽量使用小程序提供给你的几种样式参数

demo
demo

表单以及常用表单组件 :form,input,checkbox,label,picker,radio,slider,switch

demo

各种操作反馈,消息提示框:action-sheet,modal,toast,loading

demo

demo

demo

demo

以及一些媒体组件,video、audio,image,canvas等等

这些东西在几位前辈的文章里,以及微信的开发文档里都有更详细的介绍,我这里就不再一一介绍。

那么我们就快速的跑通一个小程序的demo先。

在开发之前你要有微信开发者工具,下载地址:https://mp.weixin.qq.com/debug/wxadoc/dev/devtools/download.html

这里我要假设大家有已经拿到了内侧或者公测的资格,因为没有拿到的话下面的步骤是没法进行的。

demo

打开以后你会看到这样的界面,我们选择小程序进入

demo

这时候就可以创建项目了

demo

填写你拿到的appid,和自己的项目名称以及目录,然后就可以打开自己的项目了。界面如下:

demo

左侧菜单栏就不说了,中间是编译后的预览界面,新的开发者工具已经可以做到实时更新,不需要每次都去点编译了。

右侧是你的项目目录,其中pages就是你的页面结构目录了,每个页面下面必须要有 js,wxml,wxss这三个文件,缺少任何一个的话都无法上传预览。

然后就是那个当前态的app.json文件,app.json 是对整个小程序的全局配置。我们可以在这个文件中配置小程序是由哪些页面组成,配置小程序的窗口

目录
相关文章
|
4月前
|
存储 移动开发 小程序
校园圈子系统小程序(圈子论坛、私信聊天、资料共享、二手交易、兼职,跑腿)开源码开发/微信公众号、小程序、H5多端账号同步/搭建多城市的综合社交生活平台
基于开源技术栈构建的校园圈子系统小程序,整合社交与生活服务功能,涵盖兴趣圈子、私信聊天、资料共享、二手交易、兼职跑腿等六大核心模块。通过多端账号同步(微信公众号/小程序/H5),实现数据实时交互,满足学生群体的多元化需求。项目精准锚定校园市场,以“社交+服务”双轮驱动,提供一站式解决方案,支持快速部署与多校区运营,同时具备广告、佣金、会员等多元变现能力,是打造校园生态的理想工具。
310 2
校园圈子系统小程序(圈子论坛、私信聊天、资料共享、二手交易、兼职,跑腿)开源码开发/微信公众号、小程序、H5多端账号同步/搭建多城市的综合社交生活平台
|
7月前
|
机器学习/深度学习 人工智能 文字识别
POINTS 1.5:腾讯微信开源的多模态大模型,超越了业界其他的开源视觉语言模型,具备强大的视觉和语言处理能力
POINTS 1.5是腾讯微信推出的多模态大模型,基于LLaVA架构,具备强大的视觉和语言处理能力。它在复杂场景的OCR、推理能力、关键信息提取等方面表现出色,是全球10B以下开源模型中的佼佼者。
340 58
POINTS 1.5:腾讯微信开源的多模态大模型,超越了业界其他的开源视觉语言模型,具备强大的视觉和语言处理能力
|
6月前
|
存储 缓存 关系型数据库
社交软件红包技术解密(六):微信红包系统的存储层架构演进实践
微信红包本质是小额资金在用户帐户流转,有发、抢、拆三大步骤。在这个过程中对事务有高要求,所以订单最终要基于传统的RDBMS,这方面是它的强项,最终订单的存储使用互联网行业最通用的MySQL数据库。支持事务、成熟稳定,我们的团队在MySQL上有长期技术积累。但是传统数据库的扩展性有局限,需要通过架构解决。
134 18
|
5月前
|
存储 缓存 小程序
微信小程序数据缓存与本地存储:优化用户体验
本文深入探讨微信小程序的数据缓存与本地存储,介绍其意义、机制及应用场景。通过合理使用内存和本地缓存,可减少网络请求、提升加载速度和用户体验。文中详细讲解了常用缓存API的使用方法,并通过一个新闻列表案例展示了缓存的实际应用。最后提醒开发者注意缓存大小限制、时效性和清理,以确保最佳性能。
|
12月前
|
小程序 视频直播 UED
电商直播小程序系统开发:打造“直播+电商+社交”闭环
电商直播小程序成为商家与消费者互动的关键,通过微信提供的实时视频工具,实现流畅购物体验。系统功能包括直播预览、主播管理、红包互动、用户管理及闭环购物。它强化品牌效应,利用私域流量,简化流程并转化会员。开发涉及需求分析、设计规划、功能开发、测试优化及上线维护。企业需关注用户体验,以保持竞争力。寻求开发合作可联系相关人员。
|
6月前
|
存储 缓存 监控
社交软件红包技术解密(四):微信红包系统是如何应对高并发的
本文将为读者介绍微信百亿级别红包背后的高并发设计实践,内容包括微信红包系统的技术难点、解决高并发问题通常使用的方案,以及微信红包系统的所采用高并发解决方案。
197 13
|
6月前
|
存储 监控 容灾
社交软件红包技术解密(五):微信红包系统是如何实现高可用性的
本次分享介绍了微信红包后台系统的高可用实践经验,主要包括后台的 set 化设计、异步化设计、订单异地存储设计、存储层容灾设计与平行扩缩容等。听众可以了解到微信红包后台架构的设计细节,共同探讨高可用设计实践上遇到的问题与解决方案。
141 5
|
7月前
|
移动开发 小程序 前端开发
使用php开发圈子系统特点,如何获取圈子系统源码,社交圈子运营以及圈子系统的功能特点,圈子系统,允许二开,免费源码,APP 小程序 H5
开发一个圈子系统(也称为社交网络或社群系统)可以是一个复杂但非常有趣的项目。以下是一些关键特点和步骤,帮助你理解如何开发、获取源码以及运营一个圈子系统。
311 4
|
8月前
|
存储 监控 算法
社交软件红包技术解密(三):微信摇一摇红包雨背后的技术细节
本文将由微信团队工程师张文瑞分享微信春节摇一摇红包技术背后的方方面面,希望能给同行们带来启发。
172 1
|
11月前
|
小程序 UED 开发者
揭秘支付宝小程序成功之道:UI/UX设计原则与用户体验优化秘籍大公开!
【8月更文挑战第27天】支付宝小程序在移动互联网中扮演着重要角色,优秀的UI/UX设计能显著提升用户满意度。本文首先强调了设计的一致性、简洁性、易用性和响应性原则,确保用户获得顺畅体验。接着,介绍了最佳实践,包括利用支付宝设计组件库保持界面统一、优化加载速度、适应多设备显示、设置清晰导航以及重视用户反馈。最后,提供了一个简单示例展示如何应用支付宝设计组件。遵循这些指导原则,开发者能够构建既美观又实用的小程序。
381 0

热门文章

最新文章