博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
微信小程序初体验(上)- 腾讯ISUX社交用户体验设计成员出品
阅读量:6094 次
发布时间:2019-06-20

本文共 1122 字,大约阅读时间需要 3 分钟。

  微信小程序开放公测后一直很火,作为腾讯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 是对整个小程序的全局配置。我们可以在这个文件中配置小程序是由哪些页面组成,配置小程序的窗口

转载地址:http://vrwza.baihongyu.com/

你可能感兴趣的文章
iOS7重磅推新--不断尝试与重新设计的过程
查看>>
指针实现两数交换和指向函数的指针
查看>>
逗号表达式与自增自减运算符和类型转换的规
查看>>
【安全牛学习笔记】手动漏洞挖掘-SQL注入
查看>>
springboot使用jest操作elasticsearch
查看>>
聊聊hystrix的BucketedCounterStream
查看>>
聊聊rocketmq的RollingFileAppender
查看>>
【学习笔记】Android中Service通信
查看>>
java中时间类(util Date)的后延与前推处理
查看>>
数据链路层的协议分析
查看>>
10月14日笔记
查看>>
JVM01- bin/* 小工具的使用
查看>>
mysql client端安装
查看>>
hbase读写请求详细解释
查看>>
[马哥linux运维][02]
查看>>
老虞学GoLang笔记-字符串
查看>>
C# .net core SHA1CryptoServiceProvider 更新为SHA1.Create()
查看>>
刷爆朋友圈,码农月薪七万可以落户北京啦
查看>>
yum报错setup has installed conflicts filesystem < ('0', '3', None): filesystem
查看>>
记一次windows10下VM15.x的安装Centos镜像nat模式网路不通快速恢复
查看>>