最近在学小程序,整的我头都大了。微信小程序不像创建普通的Android项目一样,直接new一个文件就可以了。微信小程序创建一个项目还需要你的appid,比较严格。简单了解一下微信小程序。
它的整体感觉和HTML差不多,比如HTML展示页面,CSS渲染页面,JS使页面具有事件交互。小程序,有四个文件.js,.json,.wxml,.wxss。
先说.js,它的作用就类似于HTML中的JS一样,只不过,它是直接分成一个单独的文件。可以写一些交互事件。作用就是用户对页面进行操作
.wxml就是HTML的.html文件的作用是一样的。用来展示页面。用户所能看到的就是.wxml所呈现的。
.wxss就是HTML里面的CSS文件一样,可以对页面进行渲染。
.json文件:项目中会有一个app.json: 是当前小程序的全局配置,包括了小程序的所有页面路径、界面表现、网络超时时间、底部 tab 等
app.json代码如下
{
"pages": [
"pages/index/index",
"pages/userConsole/userConsole",
"pages/storageConsole/storageConsole",
"pages/databaseGuide/databaseGuide",
"pages/addFunction/addFunction",
"pages/deployFunctions/deployFunctions",
"pages/chooseLib/chooseLib",
"pages/lianxi",
"pages/lianxi/lianxi"
],
"window": {
"backgroundColor": "#F6F6F6",
"backgroundTextStyle": "light",
"navigationBarBackgroundColor": "#F6F6F6",
"navigationBarTitleText": "云开发 QuickStart",
"navigationBarTextStyle": "black"
}
}
我们简单说一下这个配置各个项的含义:
1.pages字段 —— 用于描述当前小程序所有页面路径,这是为了让微信客户端知道当前你的小程序页面定义在哪个目录。
2.window字段 —— 定义小程序所有页面的顶部背景颜色,文字颜色定义等。
其他配置项细节可以参考文档 小程序配置的app.json 。
工具配置 project.config.json
通常大家在使用一个工具的时候,都会针对各自喜好做一些个性化配置,例如界面颜色、编译配置等等,当你换了另外一台电脑重新安装工具的时候,你还要重新配置。
考虑到这点,小程序开发者工具在每个项目的根目录都会生成一个 project.config.json
,你在工具上做的任何配置都会写入到这个文件,当你重新安装工具或者换电脑工作时,你只要载入同一个项目的代码包,开发者工具就自动会帮你恢复到当时你开发项目时的个性化配置,其中会包括编辑器的颜色、代码上传时自动压缩等等一系列选项。
其他配置项细节可以参考文档 开发者工具的配置 。
除了app.json,还有page.json,也就是你每一个单独页面的json
如果你整个小程序的风格是蓝色调,那么你可以在app.json里边声明顶部颜色是蓝色即可。实际情况可能不是这样,可能你小程序里边的每个页面都有不一样的色调来区分不同功能模块,因此我们提供了page.json,让开发者可以独立定义每个页面的一些属性,例如刚刚说的顶部颜色、是否允许下拉刷新等等。
其他配置项细节可以参考文档 页面配置。
WXML模板
wxml与html作用一样。由许多的标签组成,如下代码
<text>{{textMsg}}</text>
<view>{{array[0].msg}}</view>
这是wxml中的标签,具体的作用还没了解清楚。这是使用js的一种写法,普通写法,直接将内容写在标签内即可。
js这种写法,需要再你的js文件的page字段的data字段内写如下代码
/**
* 页面的初始数据
*/
data: {
textMsg:"我是Lianxi页面",
array:[{msg:"我是数组0"},{msg:"我是数组1"}]
},
点击编译,直接可看到效果
从看得见的开始学,开始写。
首先,我们所能看到的,实在某一个.WXML文件里面的。那么,既然是一个程序,肯定会有一个入口,一个首页。我们要展示哪一张页面是在哪里定义的呢?上面已经有提示了。没错,就是你的工程里面的app.json这个配置文件里面定义的。当你每次创建一个page时,你会发现,你的app.json文件里面的pages字段里就会多一个路径,pages字段就是用来展示我们项目中有多少个页面文件,pages字段所在的第一个路径,则就是我们小程序进入所展示的第一个页面。
再来看看我们的WXML里面都有什么吧
代码如下
<swiper class='swiper' indicator-dots='true' autoplay='true' interval='3000' circular='true'>
<swiper-item>
<image class='swiperimg' mode='aspectFit' src='/images/code-db-inc-dec.png' ></image>
</swiper-item>
<swiper-item>
<image class='swiperimg' mode='aspectFit' src='/images/code-db-onAdd.png'></image>
</swiper-item>
<swiper-item>
<image class='swiperimg' mode='aspectFit' src='/images/code-db-onRemove.png'></image>
</swiper-item>
<swiper-item>
<image class='swiperimg' mode='aspectFit' src='/images/create-collection.png'></image>
</swiper-item>
</swiper>
<!-- type 类型 value 初始内容 placeholder 输入为空时占位内容 提示内容 -->
<!-- 表头输入框 -->
<input class='homeTextInput' type='text' placeholder='请输入内容' placeholder-class='placeclass'></input>
<!-- 设置九宫格 -->
<view class='jiugongge' wx:for="{{testForm}}" wx:key="id">
<view class='jiugg'>
<image class='testFormImage' src='{{item.icon}}'></image>
<text>{{item.name}}</text>
</view>
</view>
可以看到WXML与HTML是很相似的,都是由一个一个的标签组成。我们来看看微信小程序给我们提供了那些标签
感兴趣可以去官网去看看
标签名 | 说明 |
view | 视图容器 |
scroll-view | 可滚动视图容器 |
swiper | 滑块视图容器 |
movable-view/movable-area | 可移动的视图容器 |
cover-view | 覆盖在原生组件之上的文本视图 |
cover-image | 覆盖在原生组件之上的图片视图 |
标签名 | 说明 |
icon | 图标 |
text | 文字 |
rich-text | 富文本 |
progress | 进度条 |
标签名 | 说明 |
button | 按钮 |
checkbox | 多项选择器 |
form | 表单 |
input | 输入框 |
label | 标签 |
picker | 列表选择器 |
picker-view | 内嵌列表选择器 |
radio | 单项选择器 |
slider | 滚动选择器 |
switch | 开关选择器 |
textarea | 多行输入框 |
标签名 | 说明 |
navigator | 页面链接 |
functional-page-navigator | 跳转到插件功能页 |
标签名 | 说明 |
audio | 音频 |
image | 图片 |
video | 视频 |
camera | 系统相机 |
live-player | 实时音视频播放 |
live-pusher | 实时音视频录制 |
标签名 | 说明 |
map | 地图 |
标签名 | 说明 |
canvas | 画布 |
标签名 | 说明 |
open-data | 展示微信开放的数据 |
web-view | 承载网页的容器 |
ad | 广告 |
official-account | 关注公众号 |
建议还是去官方网站去学习,探索
拥有这么多的组件,相信你一定能够开发出属于你自己style的微信小程序的。
说起style,不得不提到小程序另一个重要的文件了.WXSS文件。这个文件类似于CSS文件,除了部分不相同,大部分CSS支持的,它也支持。
看一下官方对WXSS是怎么描述的
WXSS(WeiXin Style Sheets)是一套样式语言,用于描述 WXML 的组件样式。
WXSS 用来决定 WXML 的组件应该怎么显示。
为了适应广大的前端开发者,WXSS 具有 CSS 大部分特性。同时为了更适合开发微信小程序,WXSS 对 CSS 进行了扩充以及修改。
与 CSS 相比,WXSS 扩展的特性有:
- 尺寸单位
- 样式导入
选择器 | 样例 | 样例描述 |
.class | .intro | 选择所有拥有 class="intro" 的组件 |
#id | #firstname | 选择拥有 id="firstname" 的组件 |
element | view | 选择所有 view 组件 |
element, element | view, checkbox | 选择所有文档的 view 组件和所有的 checkbox 组件 |
::after | view::after | 在 view 组件后边插入内容 |
::before | view::before | 在 view 组件前边插入内容 |
全局样式与局部样式
定义在 app.wxss 中的样式为全局样式,作用于每一个页面。在 page 的 wxss 文件中定义的样式为局部样式,只作用在对应的页面,并会覆盖 app.wxss 中相同的选择器。
那,就先到这里吧,祝你事业更上一层楼