微信小程序之语法

最新推荐文章于 2024-07-26 14:06:36 发布

I_have_to_believe

最新推荐文章于 2024-07-26 14:06:36 发布

阅读量6.6k

点赞数 5

文章标签：小程序

本文链接：https://blog.csdn.net/zjc_null/article/details/87075027

版权

最近在学小程序，整的我头都大了。微信小程序不像创建普通的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 Container)
标签名	说明
view	视图容器
scroll-view	可滚动视图容器
swiper	滑块视图容器
movable-view/movable-area	可移动的视图容器
cover-view	覆盖在原生组件之上的文本视图
cover-image	覆盖在原生组件之上的图片视图

基础内容(Basic Content)
标签名	说明
icon	图标
text	文字
rich-text	富文本
progress	进度条

表单(Form)
标签名	说明
button	按钮
checkbox	多项选择器
form	表单
input	输入框
label	标签
picker	列表选择器
picker-view	内嵌列表选择器
radio	单项选择器
slider	滚动选择器
switch	开关选择器
textarea	多行输入框

导航(Navigation)
标签名	说明
navigator	页面链接
functional-page-navigator	跳转到插件功能页

多媒体(Media)
标签名	说明
audio	音频
image	图片
video	视频
camera	系统相机
live-player	实时音视频播放
live-pusher	实时音视频录制

地图(Map)
标签名	说明
map	地图

画布(Canvas)
标签名	说明
canvas	画布

开放能力(Open Ability)
标签名	说明
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 中相同的选择器。

那，就先到这里吧，祝你事业更上一层楼

I_have_to_believe

关注

5
点赞
踩
45

收藏

觉得还不错? 一键收藏
2
评论
微信小程序之语法

最近在学小程序，整的我头都大了。微信小程序不像创建普通的Android项目一样，直接new一个文件就可以了。微信小程序创建一个项目还需要你的appid，比较严格。简单了解一下微信小程序。它的整体感觉和HTML差不多，比如HTML展示页面，CSS渲染页面，JS使页面具有事件交互。小程序，有四个文件.js,.json,.wxml,.wxss。先说.js，它的作用就类似于HTML中的JS一样，只...
复制链接

扫一扫