微信小程序入门一: 简 介、文本、事件、样式
现在微信小程序已经推出了,我也来这里尝一下鲜。
小程序简介
原生APP和Web APP谁是未来的主流这个命题争了很多年,而原生APP最大的优势也就是对于系统控件接口和框架的调用能力比Web APP不知道高到哪里去。虽然京东同时提供了手机APP和手机H5形式的页面供用户浏览和下单,但是同时用过二者的都能体会到,H5页面在流畅度上还是差一些。
在此之前,很多创业者以公众号菜单栏内嵌H5的形式,完成了基础功能的微信化植入,但通常都是比较简单的页面,操作体验比较一般。
这次微信推出的小程序,最大的亮点在于微信提供了丰富的框架组件和API接口供开发者调用,具体包含:界面、视图、内容、按钮、导航、多媒体、位置、数据、网络、重力感应等。在这些组件和接口的帮助下,建立在微信上的小程序在运行能力和流畅度上面便可以保持和原生APP一样的体验。
小程序注册
小程序、订阅号、服务号、企业号现在是并行的体系,所以需要使用的话,需要重新注册。
关于如何注册,看一下官方文档说明,这里就不累赘了:
微信小程序接入指南
开发工具
这里从官方下载:
微信小程序开发工具下载地址
好了,开发工具下载完成,安装之后就可以直接开使实例了。
开发工具简介
1.扫码登陆(这里需要先注册微信小程序)
2.本地小程序项目
3.添加项目,这里直接点“无APPID”即可
4.好了,可以开始编码了
项目目录结构
这个目录是刚刚勾选quick start项目
自动生成的。
pages
文件夹-放的是所有的页面文件。utils
文件夹-放的是一些js工具集。app.js
-启动入口文件。app.wxss
-全局样式表文件。app.json
-全局配置文件。
.js
后缀的是脚本文件,.json
后缀的文件是配置文件,.wxss
后缀的是样式表文件类似.css
,.wxml
结构文件类似.html
看一下app.json
可以看到pages
项目配资的是页面路径,以及入口。默认第一个路径做为入口。
pages/index/index
,这个项目省略了.wxml
后缀。
每一个页面就会生成一个目录,每个目录默认都四个文件。
实例
实例一:输出文字
打开index.wxml
view
就相当于html中的div。image
是图片。text
是文本。
添加文本代码:
<text>你好,世界!</text>
效果:
实例二:修改文字颜色
添加class
<text class="my-class>你好,世界!</text>
修改index.wxss
.userinfo {display: flex;flex-direction: column;align-items: center;
}.userinfo-avatar {width: 128rpx;height: 128rpx;margin: 20rpx;border-radius: 50%;
}.userinfo-nickname {color: #aaa;
}.usermotto {margin-top: 200px;
}.my-class{color: red;
}
保存,看效果
实例三:按钮事件,并修改文本
添加按钮组件,并添加事件处理myEventHandle
。
打开index.js
,添加事件处理函数,并添加data
变量。
效果:
博客名称:王乐平博客
博客地址:http://blog.lepingde.com
CSDN博客地址:http://blog.csdn.net/lecepin
微信小程序入门一: 简 介、文本、事件、样式相关推荐
- github打开前端样式丢失_微信小程序入门教程之二:页面样式
这个系列的上一篇教程,教大家写了一个最简单的 Hello world 微信小程序. 但是,那只是一个裸页面,并不好看.今天接着往下讲,如何为这个页面添加样式,使它看上去更美观,教大家写出实际可以使用的 ...
- image 微信小程序flex_微信小程序入门教程之二:页面样式
这个系列的上一篇教程,教大家写了一个最简单的 Hello world 微信小程序. 但是,那只是一个裸页面,并不好看.今天接着往下讲,如何为这个页面添加样式,使它看上去更美观,教大家写出实际可以使用的 ...
- 微信小程序入门一:点击事件
公众号:柏战不殆(Baiman_Ber) //index.js Page({data:{src:'../images/公众号.jpg',data:'点击我呀'},//点击事件click:functio ...
- 微信小程序入门---01
目录 微信小程序入门 一.小程序简介 二.第一个小程序 二.小程序代码的构成 三.WXML模块 四.WXSS 样式 五.JS 逻辑交互 六.组件 七.API 八.WXML 模板语法 - 数据绑定 九. ...
- 微信小程序入门之常用组件(04)
常见组件 重点讲解微信小程序中常见的布局组件 view,text,rich-text,button,image,navigator,icon,swiper, radio,checkbox 等 一.vi ...
- 微信小程序入门教程+案例demo
微信小程序入门教程+案例demo 尊重原创,转载请注明出处:原文查看惊喜更多 http://blog.csdn.net/qq137722697 首先摆在好姿态,--微信小程序开发也就那么回事.你只需要 ...
- 从零开始的微信小程序入门教程(一)
从零开始的微信小程序入门教程(一) 之前说要和同事一起开发个微信小程序项目,现在也在界面设计,功能定位等需求上开始实施了.所以在还未正式写项目前,打算在空闲时间学习下小程序.本意是在学习过程中结合实践 ...
- A095_day01_微信小程序入门与组件
目录 微信小程序入门与组件 - Day01 1.内容介绍 2.微信小程序简介(了解) 2.1.什么是小程序 2.2.微信小程序与app的区别 2.3.小程序在入口 2.4.微信小程序的工作原理 2.5 ...
- 微信小程序 - 入门篇
微信小程序入门 文章目录 微信小程序入门 全局配置 window配置 微信组件 微信小程序与Vue 复用性 自定义Tabbar 组件的封装 路由跳转 网络低代码 本地存储 弹窗交互 weUI 全局配置 ...
最新文章
- 哈希表的分类,创建,查找 以及相关问题解决
- [YTU]_2535 (Problem I: C++复数运算符重载(+与))
- Mysql:is not allowed to connect to this MySQL
- 【图像超分辨率】RS Image SR Based on Visual Saliency Analysis
- php webshell开源,[github开源]webshell连接器--Jeshell
- Java核心技术36讲
- php 数组 json字段去不全,json_encode – PHP给出了不完整的json字符串
- c语言共享内存,在爷儿俩进程间使用共享内存(共享内容含指针)
- fckeditor零碎要点---3.FCK:editor instanceName=myeditor value=李德伟欢迎您 height=400/FCK:editor
- pytorch——nn.BatchNorm2d()函数
- 契税申报期限_纳税申报的5个小常识,不知道的不是合格的财务人!
- MATLAB获取附加功能的方法
- CE修改器入门:运用代码注入
- 数据结构 实验4——拓扑排序
- Activity的生命周期
- 电脑复制,电脑复制粘贴,详细教您电脑不能复制粘贴怎么办
- 《趣味知识博文》小W与小L带你聊天式备考CDA Level Ⅰ(三)
- 34岁本科男,做了5年功能测试想转行,除了进厂还能干什么?
- 13.清洗网址中的垃圾字符
- 为什么需要虚继承,虚继承的实现原理
热门文章
- php中获取系统信息的方法
- android 开发不能创建目录
- 五年后存储会是什么样子
- C# 截取图片的方法
- 更换mysql_Docker搭建MySQL主从复制
- 帮助学生改善学习方法_学生应该如何花费时间改善自己的幸福
- Spring—集成Junit
- 如果您是JavaScript开发人员,为什么要进行增强现实-以及如何开始
- 小程序服务器域名5次_为什么您不应该在100美元的服务器上用5天的时间构建面向500,000个用户的应用程序...
- Java实现点击导出excel页面遮罩屏蔽,下载完成后解除遮罩