微信小程序初体验(上)- 腾讯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 是对整个小程序的全局配置。我们可以在这个文件中配置小程序是由哪些页面组成,配置小程序的窗口

目录
相关文章
|
小程序 数据库 Android开发
微信小程序云开发校园社交二手物品跳蚤平台表白动态求助寻物组队
微信小程序云开发校园社交二手物品跳蚤平台表白动态求助寻物组队
156 1
微信小程序云开发校园社交二手物品跳蚤平台表白动态求助寻物组队
|
前端开发
企业微信开发(3)——更改应用可见性、外部联系人变更事件、成员变更事件
在变更应用可见性时,需要变更本地可见人员数据表,并且调用企业微信的发送消息接口,主动发送消息给新增可见范围的人员,告诉他该应用是可见的。
1305 0
企业微信开发(3)——更改应用可见性、外部联系人变更事件、成员变更事件
|
7天前
|
小程序 前端开发 API
微信小程序全栈开发中的异常处理与日志记录
【4月更文挑战第12天】本文探讨了微信小程序全栈开发中的异常处理和日志记录,强调其对确保应用稳定性和用户体验的重要性。异常处理涵盖前端(网络、页面跳转、用户输入、逻辑异常)和后端(数据库、API、业务逻辑)方面;日志记录则关注关键操作和异常情况的追踪。实践中,前端可利用try-catch处理异常,后端借助日志框架记录异常,同时采用集中式日志管理工具提升分析效率。开发者应注意安全性、性能和团队协作,以优化异常处理与日志记录流程。
|
7天前
|
小程序 安全 数据安全/隐私保护
微信小程序全栈开发中的身份认证与授权机制
【4月更文挑战第12天】本文探讨了微信小程序全栈开发中的身份认证与授权机制。身份认证包括手机号验证、微信登录和第三方登录,而授权机制涉及角色权限控制、ACL和OAuth 2.0。实践中,开发者可利用微信登录获取用户信息,集成第三方登录,以及实施角色和ACL进行权限控制。注意点包括安全性、用户体验和合规性,以保障小程序的安全运行和良好体验。通过这些方法,开发者能有效掌握小程序全栈开发技术。
|
7天前
|
JavaScript 前端开发 小程序
微信小程序全栈开发之性能优化策略
【4月更文挑战第12天】本文探讨了微信小程序全栈开发的性能优化策略,包括前端的资源和渲染优化,如图片压缩、虚拟DOM、代码分割;后端的数据库和API优化,如索引创建、缓存使用、RESTful API设计;以及服务器的负载均衡和CDN加速。通过这些方法,开发者可提升小程序性能,优化用户体验,增强商业价值。
|
7天前
|
小程序 前端开发 JavaScript
微信小程序全栈开发中的PWA技术应用
【4月更文挑战第12天】本文探讨了微信小程序全栈开发中PWA技术的应用,PWA结合Web的开放性和原生应用的性能,提供离线访问、后台运行、桌面图标和原生体验。开发者可利用Service Worker实现离线访问,Worker处理后台运行,Web App Manifest添加桌面图标,CSS和JavaScript提升原生体验。实践中需注意兼容性、性能优化和用户体验。PWA技术能提升小程序的性能和用户体验,助力开发者打造优质小程序。
|
1月前
|
小程序 前端开发 程序员
微信小程序开发入门教程-小程序账号注册及开通
微信小程序开发入门教程-小程序账号注册及开通

热门文章

最新文章