神刀安全网

小程序极简入门1

体验小程序

话不多说,直接开干…

首先下载 微信开发者工具

打开微信开发者工具,选择体验小程序

小程序极简入门1

体验小程序

在本地磁盘新建一个目录,如helloWorld

小程序极简入门1

小程序体验

点击确定,微信将会为我们生成一个默认的小程序欢迎页:

小程序极简入门1

小程序欢迎页

小程序的构成

欢迎页的内容是由以下文件渲染出来的:

小程序极简入门1

文件结构

首先,我们来分析下index.wxml

<view class="container">   <view class="userinfo">     <button wx:if="{{!hasUserInfo && canIUse}}" open-type="getUserInfo" bindgetuserinfo="getUserInfo"> 获取头像昵称 </button>     <block wx:else>       <image bindtap="bindViewTap" class="userinfo-avatar" src="{{userInfo.avatarUrl}}" mode="cover"></image>       <text class="userinfo-nickname">{{userInfo.nickName}}</text>     </block>   </view>   <view class="usermotto">     <text class="user-motto">{{motto}}</text>   </view> </view> 

很明显,这些内容与html相似,但又不属于html。看着像是自定义的xml。实质上,这是微信标记语言(WeiXin Markup Language),详见看 WXML文档,可以将其与web页面的html相对应

接着分析index.wxss

/**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; } 

这个文件一看就是与web页面的css相对应。WXSS(WeiXin Style Sheets)是一套样式语言,用于描述 WXML 的组件样式。官方文档

最后分析index.js文件,文件内容太长就不列出来了。虽然后缀名与web的javascript一样,但两者是不同的语言,在小程序中,被称为WXS(WeiXin Script)j, 详见官方文档

由此可见,小程序的页面是由WXML, WXS, WXSS三者构建而成。我们可以简单地将这三者分别对应于web三大标准中的html, js, css, 便于我们快速理解新概念

通过对文件进行修改,体验下开发流程,将index.js中的数据修改

小程序极简入门1

修改内容

然后按编译查看效果

小程序极简入门1

编译

页面的显示内容已被修改

小程序极简入门1

你好,世界

转载本站任何文章请注明:转载至神刀安全网,谢谢神刀安全网 » 小程序极简入门1

分享到:更多 ()