阅读更多

0顶
0踩

行业应用

原创新闻 微信小程序,开发大起底

2017-01-16 11:21 by 副主编 jihong10102006 评论(0) 有4154人浏览
引用
作者简介:张智超,北京微函工坊开发工程师,CSDN微信开发知识库特邀编辑。微信小程序爱好者。
感谢@翟东平 @qq_31383345 @nigelyq 等热情参与和共建
责编:CSDN知识图谱小助手

「小程序」是什么
引用
张小龙在朋友圈里这样解释道:小程序是一种不需要下载安装即可使用的应用,它实现了应用「触手可及」的梦想,用户扫一扫或搜一下即可打开应用。也体现了「用完即走」的理念,用户不用关心是否安装太多应用的问题。应用将无处不在,随时可用,但又无需安装卸载。
微信小程序是一种全新的连接用户与服务的方式,它可以在微信内被便捷地获取和传播,同时具有出色的使用体验。

我们将从以下几个角度来起底小程序开发
知识点
- 微信开发要学哪些知识点
- 小程序要学什么

官网分析
- 入口文件
- page
- 页面渲染
- 事件
- 组件
- 样式设置

官网分析
- 小程序案例解读
- 小程序源码下载
- 小程序精品课程

「微信开发」知识图谱
微信开发需要学习哪些知识点,点击看具体内容


入口文件
首先从官方文档给的框架说起,微信小程序官方文档给出了app.js, app.json, app.wxss,先从这三个文件说起.
  • app.json
  • 可以对小程序进行全局配置,决定页面文件的路径,窗口表现,设置网络超时时间,设置多tab等.
  • app.js
  • 整个小程序的入口文件,开发者的逻辑代码在这里面实现,同时在这个文件夹里面可以定义全局变量.
  • app.wxss
  • 小程序的公共样式表.(为了适应广大的前端开发者,我们的 WXSS 具有 CSS 大部分特性。 同时为了更适合开发微信小程序,我们对 CSS 进行了扩充以及修改。)

接着我们就结合官方给出的代码具体说一下上面提到的三个文件
首先是配置文件app.json
下面是官方给出的例子
{
  "pages": [
    "pages/index/index",
    "pages/logs/index"
  ],
  "window": {
    "navigationBarTitleText": "Demo"
  },
  "tabBar": {
    "list": [{
      "pagePath": "pages/index/index",
      "text": "首页"
    }, {
      "pagePath": "pages/logs/logs",
      "text": "日志"
    }]
  },
  "networkTimeout": {
    "request": 10000,
    "downloadFile": 10000
  },
  "debug": true
}

官方给出了app.json五个配置项列表.(pages(Array), window(Object), tabBar(Object), networkTimeout(Object), debug(Boolean)),接着我们就详细的分下一下这几个配置项。

1. pages
它的作用是配置小程序的页面,这个配置项是必填的,它接受一个数组,里面的每一项都是字符串,从上面给出的代码:
"pages": [
"pages/index/index",
"pages/logs/index"
]

可以看出,每一项分别对应的都是实现文件的路径以及他的文件名.
注意:这个配置里面的第一行配置是它的初始页面,例如上面代码的初始页面就是index

2. window
这个配置项是用来设置小程序的状态栏、导航条、标题、窗口背景色。

他给出了六个属性(navigationBarBackgroundColor(HexColor), navigationBarTextStyle(String-(black,white)), navigationBarTitleText(String), backgroundColor(HexColor), backgroundTextStyle(String-(dark,light)), enablePullDownRefresh(Boolean)),开发者可以根据自己的需求来进行配置.

我们详细说一下这几个属性分别的功能:
  • navigationBarBackgroundColor 它是用来设置导航栏背景颜色,这个属性要输入的是十六进制颜色值.
  • navigationBarTextStyle 它是用来导航栏标题颜色的,它的输入类型是字符串(String),但是现在官网给出的文档目前仅支持(black和white)这两种颜色.
  • navigationBarTitleText 这个属性是显示导航栏标题内容的,开发者可以根据自己的需要来进行设置.
  • backgroundColor 这个属性是设置窗口的背景色的,它需要输入的也是十六进制颜色值的.
  • backgroundTextStyle 这个属性我的理解是设置窗口内容的样式的,官方给出的标准说明是下拉背景字体、loading 图的样式,这个属性同navigationBarTextStyle属性一样目前仅支持两种颜色(dark和light).
  • enablePullDownRefresh 这个属性是设置是否开启下拉刷新,默认是开启的,注意: 在这个配置文件(app.json)中如果关闭了下拉刷新,当你在你自己开发的页面中想要设置下拉刷新也是行不通的,也就是说如果你想要在以后页面中使用下拉刷新这个功能,就必须保证这个配置文件中的这一项设置是打开的.
    上面给出的示例代码:
{
  "window":{
    "navigationBarBackgroundColor": "#ffffff",
    "navigationBarTextStyle": "black",
    "navigationBarTitleText": "微信接口功能演示",
    "backgroundColor": "#eeeeee",
    "backgroundTextStyle": "light"
  }
} 

显示效果


3.tabBar
这个配置项是用来配置页面底部的tab栏的,开发者可以根据自己的需求来进行配置.

注意: tabBar是一个数组,只能配置最少2个,最多5个,而且tab栏的顺序是按照数组的排序来的.

tabBar官方给出了一下五个属性(color(HexColor), selectedColor(HexColor), backgroundColor(HexColor), borderStyle(String), list(Array) ).

接下来说说我对这五个属性的理解:

    color 设置tab上的文字默认颜色
    selectedColor 设置tab上的文字选中的颜色
    backgroundColor 设置tab的背景颜色
    borderStyle 设置边框的颜色,现在仅支持(black和white)
    上面这四个属性就是按照官方给出的API来设置就可以,下面说一下list属性.list属性接受的是一个数组(Array),在list下面配置的每一项都是一个对象,他们都有以下这四个属性(pagePath(String), text(String), iconPath( String), selectedIconPath(String)).
    pagePath 这个定义的是页面的路径,但是这个属性定义的路径必须是在pages上定义过的.
    text 设置的是按钮上的文字
    iconPath 是定义icon图片的路径,这个属性定义的图片大小不超过40kb
    selectedIconPath 定义的是当选中按钮之后显示的图片,同样图片的大小不能超过40kb.

    下面是官方给出的效果图:


4.networkTimeout
它是用来设置各种网络请求的超时时间的,单位是毫秒,官方给出了四个属性(request, connectSocket, uploadFile, downloadFile)这四个属性分别定义的是[b]wx.request, wx.connectSocket, wx.uploadFile, downloadFile [/b]这四个API的超时时间.

5.ebug
如果在app.json将debug配置为true,那么在开发者工具的控制台面板中可以输出详细的调试信息.

以上就是根据官方给出的文档,我学习之后对app.json配置一些心得,下面我们在看一下app.js 这个文件.

可以看到app.js这个文件的后缀是js,开发框架在逻辑层用的语言就是JavaScript.但小程序也在JavaScript的基础上做了一个修改,可以称之为一个新的轮子.这个框架可以使开发者更加方便的调用一些微信的功能,例如扫一扫,微信支付等一些微信特有的功能.

我们接着回到app.js这个文件中来,其他的稍后再说.

这个文件是整个小程序的入口文件,也可以说是控制整个小程序生命周期的文件,那么我们就不难想象,我们在这个文件中应该实现的几个功能,首先我们肯定需要对整个程序进行注册,正好微信给我们提供了一个app()来实现对整个程序的注册,同时app()里面还实现了对小程序生命周期的监控函数(onLaunch, onShow, onHide), 其中onLaunch是监听小程序初始化,当初始化完成时会触发onLaunch,当然这个函数是全局只触发一次.onShow是监听小程序的显示,在小程序启动时候,或者当你从后台进入到前台的时候就会触发这个函数.而onHide函数是监听小程序的隐藏的,当你从前台切换到后台的时候,会触发onHide.有了这些一个小程序的实例基本上算是完成了,当然为了让开发者加入更多自己的逻辑,微信还提供了让开发者在app()中加入自己的逻辑,开发者可以可以添加任意的函数或数据到 Object 参数中,用 this 可以访问.

注意:app()只能定义在app.js中,而且不能注册多个.

当在app.js中注册了实例之后,如果你想在自己的逻辑页面调用它,你可以用getApp()这个全局函数,这样你就可以全局调用app()里面的数据.
微信给出的官方代码如下:
var appInstance = getApp()
console.log(appInstance.globalData) // I am global data

注意:getApp()获取里实例之后,不要私自调用生命周期函数. 而且不要在app.js中用getApp()函数,用this就可以调用app()里面的东西.
引用
基本上app.js就这些东西,还有一些API里面的内容会在后面一一介绍.下面我们就看一下app.wxss这个文件,一般来说做过网站开发的(我自己是用php来开发的,这是我个人的一点拙见,如有不对请见谅)相信对css写在单独的文件中应该不会陌生,这个app.wxss也是类似的,不过他的的配置是针对全局的,也就是说如果你在后面的page中没有重新配置他,那么他就会调用这个文件中的样式设置,但是如果你有个人需求,需要在每个页面重新写样式,那也没关系,他会自动覆盖宰割文件中的样式.

当你重新创建一个微信小程序他就会出现这几个文件,以上是我结合官方文档对他们的一些理解,接下来就是page的逻辑,视图,配置的一些心得.

「小程序」的page
引用
这一块就是开发者自己的业务实现文件了. 每一个页面可以放在一个文件夹中,这个文件夹中一般包括.js, .json, .wxml, .wxss 这四个文件,微信官方还建议这四个文件的名字最好和文件夹的名字一致.这个便于框架自动查找,不需要做更多的配置.

当你开始做页面的功能的时候这个时候在.js,也需要注册,微信官方给出Page()这个函数来注册一个页面,他接受一个object参数,用其来指定页面的初始数据,生命周期函数,事件处理函数.需要注意的是当你在注册这个页面的时候要确定在最开始的app.json这个配置文件中已经配置过这个页面,而且当你对程序有所改变的时候也要确保app.json这个文件中的内容也随之相应改动.

微信给Page()函数一下几个属性(data(Object), onLoad(function), onReady(Function), onShow(Function), onHide(Function), onUpload(Function), onPullDownRefresh(Function)),而且你也可以添加任意函数或者数据到object参数中,在这个页面用this即可访问.

下面就简单的介绍一下这几个官方给出的属性:
  • data - 实现页面的初始化数据
  • onLoad - 是生命周期函数,用来监听页面加载,一个页面只会调用一次,它的参数可以获取wx.navigateTo和wx.redirectTo及< navigator/>中的query.
  • onReady - 同样是生命周期函数,用来监听页面初次渲染完成,一个页面只会调用一次,代表页面已经准备妥当,可以和视图层进行交互.对页面的设置请在onReady之后设置,如wx.setNavigationBarTitle.
  • onShow - 生命周期函数,用来监听页面显示,每次页面打开都会调用一次.
  • onHide - 生命周期函数,监听页面隐藏”,当wx.navigateTo或者底部tab切换之后调用.
  • onUpload - 生命周期函数,用来监听页面卸载.当wx.navigateTo和 navigateBack的时候调用.
  • onPullDownRefresh - 页面相关事件处理函数,用来监听用户的下拉动作.但是需要在config的window选项中开启enablePullDownRefresh,当数据刷新完成之后,可以用wx.stopPullDownRefresh停止当前页面的下拉刷新.
    下面是微信给出的官方代码:
Page({
  data: {
    text: "This is page data."
  },
  onLoad: function(options) {
    // Do some initialize when page load.
  },
  onReady: function() {
    // Do something when page ready.
  },
  onShow: function() {
    // Do something when page show.
  },
  onHide: function() {
    // Do something when page hide.
  },
  onUnload: function() {
    // Do something when page close.
  },
  onPullDownRefresh: function() {
    // Do something when pull down
  },
  // Event handler.
  viewTap: function() {
    this.setData({
      text: 'Set some data for updating view.'
    })
  }
})

上面说了用data属性来设置页面的初始化数据,但是如果我们想改变数据里面的值,怎么办??
那么我们就介绍一个微信官方给我们提供的setData()函数,这个函数可以将数据从逻辑层发送到数据层,同时还可以改变this.data的值.
setData()接受一个对象参数,让数据以key,value的形式表示将this.data中key对应的值改变成value.
下面是微信官方给出的page的生命周期的图片:

在小程序中的所有页面路由全部由框架进行管理,对于路由的触发方式以及页面的生命周期函数可以通过调用API来进行..

下面我们就简单的介绍一下微信小程序的API.
微信小程序框架给我们提供了丰富的微信原生API,可以方便的调用微信提供的能力,如获取用户信息,本地存储,支付功能等.
下面是微信关于API提供的说明:
  • wx.on 开头的API是监听某个事件发生的API接口,接受一个CALLBACK函数作为参数,当事件触发时,会调用CALLBACK函数.
  • 如未有特殊约定,其他API接口都接受一个object作为参数.
  • OBJECT 可以指定success,fail,complete来接受接口调用结果.

API的具体调用请看 微信小程序API文档
因为现在微信小程序还在内测期间,我也没有内测号,所以具体的调用API代码需要在微信小程序开放之后,根据具体的逻辑进行实现.而且微信API文档已经给的非常清楚,相信调用不会太过困难.

「小程序」页面渲染
上面的这些就是微信小程序page的页面注册以及API功能实现,但是我们知道光有这些是不够的,在互联网发展到现在我们更加注重的是人机交互,让用户有一个更好的体验才算是 一个好的程序,那么接下来我们就讲讲微信小程序是如何对页面进行渲染的。

在微信小程序中采用了微信自己原生的渲染方式。微信小程序的页面布局采用的是wxml,然后结合基础组件,事件系统构建出来页面的结构。

wxml中有数据绑定,条件渲染,列表渲染, 模版,事件, 引用这几种方式,下面我们就具体说说这几种方式。

数据绑定 在上面我们已经说过了在Page()注册页面的时候,里面会有一个data属性来定义初始化数据,现在页面渲染的数据绑定的时候就需要调用data里面的数据了。下面看一下官方给出的例子。
<view> {{ message }} </view>

Page({
  data: {
    message: 'Hello MINA!'
  }
})

从上面的代码可以看出来在视图层接受逻辑层的代码的时候需要用2个大括号把数据的键值包起来就可以得到数据的值。当然在视图层还可以进行运算(三元运算,算术运算),逻辑判断,字符串运算,而且还可以在大括号里面进行组合(数组,对象(虽然可以随意组合,但是如果后面的变量名和前面的变量名相同的话,那么后面的会覆盖前面的))。

条件渲染 顾名思义所谓的条件渲染,就是通过条件来判断是否需要渲染该代码块。条件渲染主要是用到wx:ifblock wx:if 这两个,第一个相信好理解,第二个是在block里面进行条件渲染,这里我们特别说明一下< block/>并不是一个组件,它仅仅是一个包装元素,不会在页面中做任何渲染,只接受控制属性。和我们以前的逻辑编程类似,既然有了wx:if ,那么我们也会有wx:elseif和wx.else,这几个组合起来,可以使条件渲染更加灵活。
在这里官方文档中提到了一个wx:if和hidden的对比,通过合理的运用这两种方法可以使你的程序更优。下面我们就是说说他们俩的区别:
因为wx:if之中也可能包含数据绑定,所以当wx:if的条件值切换时,框架有一个局部渲染的过程,他会确保条件在切换是销毁或者重新渲染。同时wx:if也是有惰性的,如果初始渲染条件为false,框架什么也不会做,只有在条件第一次变为真的时候才会开始渲染。相比之下hidden就简单的多,组件始终都会被渲染,只是简单的控制显示和隐藏,一般来说,wx:if 有更高的切换消耗,而hidden有更高的初始渲染消耗,你可以根据自己的需求来调用。

列表渲染 – wx:for
下面我们就说说wx:for的用法,wx:for绑定一个数组,就可使用数组中各项数据重复渲染该组件,注意默认数组的当前项的下标变量名默认为index,数组当前项的变量名为item,,当然你也可以根据自己的需要来重新定义这两个名字,使用wx:for-item可以指定数组当前元素的变量名,wx:for-index可以指定数组当前下标的变量名,wx:for也可以嵌套,这个时候就需要改变默认框架给定义的名字了。
下面是官方给出的事例代码:
<view wx:for="{{items}}">
  {{index}}: {{item.message}}
</view>

Page({
  data: {
    items: [{
      message: 'foo',
    }, {
      message: 'bar'
    }]
  }
})

<view wx:for="{{array}}" wx:for-index="idx" wx:for-item="itemName">
  {{idx}}: {{itemName.message}}
</view>


模版
WXML提供模版(template),可以在模版中定义代码片段,然后在不同的地方调用.微信小程序的模版可以用name来命名它的名字,在使用的时候用is来声明使用的模版,然后将模版所需要的data传入即可,下面我们用官方文档给的代码来看一下如何声明及调用模版.
<!--
  index: int
  msg: string
  time: string
-->
<template name="msgItem">
  <view>
    <text> {{index}}: {{msg}} </text>
    <text> Time: {{time}} </text>
  </view>
</template>

上面这段代码可以看到模版的名字是”msgItem”.
<template is="msgItem" data="{{...item}}"/>

在调用的时候使用方法如上,在is属性加上模版的名字即可.后面还有一个data属性,并且在里面还加入数据,下面我们就看一下下面这段代码.
Page({
  data: {
    item: {
      index: 0,
      msg: 'this is a template',
      time: '2016-09-15'
    }
  }
})

也许有的人可能对data属性里面数据绑定的内容有点儿疑问,”{{…item}}”这种调用是可以将上面代码中的item对象展开,让数据循环调用该模板.

当然如果模版的功能仅仅是这样,那么他的可用性就太差了,事实当然不会是这样,模版也可以根据你自己的条件来判断在那种情况下渲染那种模版,下面我们就看一下官方给出的代码.
<template name="odd">
  <view> odd </view>
</template>
<template name="even">
  <view> even </view>
</template>

<block wx:for="{{[1, 2, 3, 4, 5]}}">
    <template is="{{item % 2 == 0 ? 'even' : 'odd'}}"/>
</block>

通过上面对条件渲染的介绍,我们可以看到在循环掉数组[1,2,3,4,5]之后item数组属性在三元运算中判断调用哪一个模版.

在这儿再多说一句模版也有自己的作用域,只能使用data传入的数据,当然data传入的数据可以是你自己新建的数据,也可以是你在配置中写好的初始化数据.

好了现在我们说完模版了,可能有的同学就该想了,我写好模版之后该如何调用它,如果他们是在一个页面那肯定没问题,但是这样的话可用性还是很差啊,如果我想把模版单独放在一个页面,在调用它的时候该怎么办啊?没关系,微信小程序早就考虑到了,那么我们接下来就说说引用.

引用
WXML提供两种引用方式import和include.
接下来我们就先说说import这种方式,我们就结合代码来看,它调用在不同页面的模版消息如下:
<!-- item.wxml -->
<template name="item">
  <text>{{text}}</text>
</template>

在 index.wxml 中引用了 item.wxml,就可以使用item模板:
<import src="item.wxml"/>
<template is="item" data="{{text: 'forbar'}}"/>

这里要注意一下,import引用也是有作用域这个概念存在的,它只会定义import目标文件中定义的template,而不会import目标文件import中的template.简而言之就是import只能引用template而不能引用import.

上面说了import是如何引用的,那么我们接着看一下include是怎么引用的.
include引用和import唯一不同点就是他的引用相当于复制,他会复制< template>里面的全部内容,但是不包含< template>,看一下代码相信你可以理解的更加明白.
<!-- index.wxml -->
<include src="header.wxml"/>
<view> body </view>
<include src="footer.wxml"/>

<!-- header.wxml -->
<view> header </view>

<!-- footer.wxml -->
<view> footer </view>


「小程序」的事件
上面我们说的视图层这些方法已经可以构成一个静态的页面了,但我们现在是21世纪啊,一个没有人机交互的程序怎么能在这个世界生存下来了?在用户体验至上的今天,微信小程序不可能不考虑到这一点,接下来我们就说说视图层的事件方法.

先来说说什么是事件,相信有的人看到这儿肯定是一脸懵逼,你这说的啥玩意儿,说的这么专业,我还不如看文档去.那么我们就说说什么是事件.

事件就是一种页面到逻辑层的通讯方式,比如说你的操作想得到机器的反馈,这时候就用到事件了.事件可以将用户的行为反馈到逻辑层进行处理.
说到这儿不禁又有一个问题,那他是怎么用的呢? 事件可以绑定到组件上,当触发事件,就会执行逻辑层对应的事件处理函数,当然为了更加方便人机交互,用户还可以携带额外的信息,如id,data等.

「小程序」的组件
可能有人看完刚才的一段就说了,好了,你刚才说的事件解释的差不多了,可是你为什么有冒出一个组件,这让我这么理解?

既然说到组件了,我们就先简单的了解一下,在之后的组件板块再详说,先保证大家能看懂什么是事件就好了.

为什么要有组件呢?组件是框架为了开发者进行快速的开发而设计的.
那什么是组件呢? 组件是视图层的基本组成单元,在微信小程序中组件自带一些功能与微信风格的样式,一个组件通常包括开始标签和结束标签,属性是用来修饰这个组件,内容在两个标签之内.
<tagname property="value">
  Content goes here ...
</tagename>

在这里需要注意一点,组件和属性都是小写,并且以”-“进行连接.

简单的介绍一下组件,那我们继续说事件.

事件分为冒泡事件和非冒泡事件,冒泡事件是当一个组件上的事件被触发后,该事件会向父节点传递,而非冒泡事件则不会.
现在微信小程序给出的冒泡事件仅仅有6个(touchstart,touchmove, touchcancel,touchend,tap, longtap),下图是他们分别对应的触发条件.

剩下的都属于非冒泡事件.

接下来我们就说说事件怎么用?

事件是通过事件绑定来实现的.它的写法是以key,value的形式来写的.key以bind 和catch 开头,然后跟上事件的类型. value 是一个字符串,需要在对应的page中定义同名的函数,不然当触发事件的时候会报错.(bind 事件绑定不会阻止冒泡事件向上冒泡,而catch 可以阻止冒泡事件向上冒泡).

说完了如何进行事件绑定了,我们再说说,当事件触发是逻辑层的事件处理函数会收到什么? 事件处理函数会收到一个事件对象. 那么这个事件对象里面都有什么属性呢?? 里面的属性有(type, timeStamp, target, currentTarget, touches, detail),下面是他们的一些说明:

  • type得到的是通用事件类型,例如tap.
  • timeStamp是页面打开到事件触发所经过的毫秒数.
  • target触发事件的源组件,它包括事件源组件的id,data-开头自定义属性的组成的集合(dataset),以及他在坐标系统中的偏移量.
  • currentTarget 触发事件的当前事件,它包括的内容与target相同.
其他的属性按照上面的说明简单了解即可,在这里我们说一下target和currentTarget中的dataset,我们知道在组件中可以定义数据,这些数据会通过事件传递给 SERVICE书写方式: 以data-开头,多个单词由连字符-链接,不能有大写(大写会自动转成小写)如data-element-type,最终在 event.target.dataset 中会将连字符转成驼峰elementType。用一段代码来说话相信大家就更清楚了.
<view data-alpha-beta="1" data-alphaBeta="2" bindtap="bindViewTap"> DataSet Test </view>

Page({
  bindViewTap:function(event){
    event.target.dataset.alphaBeta == 1 // - 会转为驼峰写法
    event.target.dataset.alphabeta == 2 // 大写会转为小写
  }
})

我不知道大家感觉怎么样,要是我自己刚开始看我写的这一大段内容,我感觉我就该骂娘了,不是说么NO图NO BB,下面我就给大家上代码,相信看完之后事件这一块基本上就明白了.
//视图层的事件绑定
<view id="tapTest" data-hi="MINA" bindtap="tapName"> Click me! </view>

//逻辑层的事件处理函数
Page({
  tapName: function(event) {
    console.log(event)
  }
})

//逻辑层的事件处理函数输出的信息
{
"type": "tap",
"timeStamp": 1252,
"target": {
  "id": "tapTest",
  "offsetLeft": 0,
  "offsetTop": 0,
  "dataset": {
   "hi": "MINA"
  }
},
"currentTarget": {
  "id": "tapTest",
  "offsetLeft": 0,
  "offsetTop": 0,
  "dataset": {
    "hi": "MINA"
  }
},
"touches": [{
  "pageX": 30,
  "pageY": 12,
  "clientX": 30,
  "clientY": 12,
  "screenX": 112,
  "screenY": 151
}],
"detail": {
  "x": 30,
  "y": 12
}
}


「小程序」的样式设置
在WXSS中引入了新的 尺寸单位rpx 它规定1rpx=0.5px = 1物理像素
WXSS的样式导入使用@import语句可以导入外联样式表,@import后跟需要导入的外联样式表的相对路径,用;表示语句结束。剩下的内容基本上和css相差不大,有兴趣的可以看一下官方文档WXSS

「小程序」精品资源推荐
小程序案例分析解读 @ qq_31383345 专栏
小程序源码下载 @nigelyq 代码包
小程序精品课程 @翟东平 系列课程

如果你有更好的微信小程序内容分享,欢迎访问CSDN微信开发知识库
覆盖50个领域,精品内容一键直达
  • 大小: 94.4 KB
  • 大小: 33.9 KB
  • 大小: 105.3 KB
  • 大小: 44.2 KB
  • 大小: 39 KB
  • 大小: 18.3 KB
  • 大小: 22.9 KB
0
0
评论 共 0 条 请登录后发表评论

发表评论

您还没有登录,请您登录后再发表评论

相关推荐

  • Tomcat目录详解

    Tomcat目录详解Tomcat目录详解Tomcat目录详解Tomcat目录详解Tomcat目录详解

  • Tomcat目录结构详细介绍

    打开tomcat的解压之后的目录可以看到如下的目录结构: 1.Tomcat的bin目录: bin目录主要是用来存放tomcat的命令,主要有两大类,一类是以.sh结尾的(linux命令),另一类是以.bat结尾的(windows命令)。 很多环境变量的设置都在此处,例如可以设置JDK路径、tomcat路径 startup 用来启动tomcat shutdown 用来关闭tomcat 修改catalina可以设置tomcat的内存 2.Tomcat的conf目录: conf目录主要是用来存放tomcat的一些配置文件。 server.xml可以设置端口号、设置域名或IP、

  • 不让tomcat显示目录文件列表的配置方法

    主要介绍了不让tomcat显示目录文件列表的配置方法,这里需要修改conf/web.xml文件,需要的朋友可以参考下

  • 用Apache或tomcat启用目录浏览并.htacess加密

    Apache安装步骤,详细描述配置目录浏览以及加密的步骤 tomcat配置虚拟目录

  • Tomcat目录结构详解

    Tomcat 服务器是一个免费的开放源代码的 Web 应用服务器,学习tomcat目录结构十分有必要,今天小编给大家带来了详细教程,感兴趣的朋友一起看看吧

  • tomcat 文件夹设置目录浏览模式

    在项目开发过程中,有时候我们需要一个简易的文件下载功能,即直接通过url将文件下载。但是有时候会报404错误,这个只要设置一个地方即可。 找到tomcat服务器安装目录,进入conf文件夹,找到web.xml文件,打开。 打开之后搜索listings关键字,找到如下位置 将红线区域的false改为true,然后重启tomcat,即可。

  • Tomcat的启动,关闭和简单部署

    Tomcat目录介绍 bin:专门用来存放Tomcat服务器的可执行程序 conf:专门用来存放Tocmat服务器的配置文件 lib:专门用来存放Tomcat服务器的jar包 logs:专门用来存放Tomcat服务器运行时输出的日记信息 temp:专门用来存放Tomcdat运行时产生的临时数据 webapps:专门用来存放部署的web工程。 work:是Tomcat工作时的目录,用来存放Tomcat运行时jsp翻译为Servlet的源码,和session钝化的目录. 启动Tomcat 找到Tomcat目录

  • tomcat如何禁止显示目录和文件列表

    打开   tomcat的安装目录/conf/web.xml   文件 找到:           default         org.apache.catalina.servlets.DefaultServlet                     debug             0                             listings

  • Tomcat禁止访问文件夹列表

    为了提高网站安全,当访问某个文件夹时,禁止显示文件列表,修改%tomcat%conf/web.xml文件。         default                   org.apache.catalina.servlets.DefaultServlet                             debug             0        

  • windows下tomcat安装,启动,关闭,及浏览器访问tomcat

    windows下tomcat安装,启动,关闭,及浏览器访问tomcat

  • Tomcat中如何允许和禁止访问Web服务器的目录结构

    我们经常看到某些J2EE网站登陆进去之后,可以浏览目录结构。 在开发阶段,我们建议这么做,因为这样我们可以快速浏览目录结构,不必刻意去记住某些 JSP的文件名。 在Tomcat服务器中,我们可以通过设置来开放和禁止目录访问。 只需要修改[b]%[color=red]tomcat_home%/conf/web.xml[/color][/b] 修改[color=blue][/color]...

  • 关闭Apache的目录浏览功能

    记得以前没有权利修改Apache配置、服务器也不支持.htaccess文件的时候都是在每个目录下新建index.html来防止列目录的,现在提供2种方法来放置用户列web目录。 1、Apache配置文件修改法 打开Apache配置文件httpd.conf 查找 Options Indexes FollowSymLinks 修改为 Options -Indexes (减号就代

  • Apache2下使用Directory控制目录权限

    http://www.blogjava.net/96sd2/archive/2007/08/28/140627.html原来JkMount可以直接放在VirtualHost 目录下面,控制请求向Tomcat转发用于控制目录访问权限的,全部应该设置为拒绝  近日公司同事在开发一段程序完成后在网站上面测试,无意中发现访问网站路径http://www.xxx.com/

  • nginx禁止目录遍历

    一.1.1.1 *目录遍历【高********】* *安全风险级别:********高* ****漏洞危害****:由于web服务器配置不当,开启了目录浏览,攻击者可获得服务器上的文件目录结构,获取敏感文件。 ****涉及URL:****http://68.65.22.156:9085/ *测试结果:* *修复方法:* · 通过修改配置文件,禁止中间件(如IIS、apache、tomcat)的文件目录索引功能 设置目录访问权限口令密码,强制用户更改符合密码复杂度策略的密码 1、禁止访问 修改nginx的参

  • apache禁止遍历目录

    禁止Apache显示目录索引,禁止Apache显示目录结构列表,禁止Apache浏览目录,这是网上提问比较多的,其实都是一个意思。下面说下禁止禁止Apache显示目录索引的常见的3种方法。 要实现禁止Apache显示目录索引,只需将 Option 中的 Indexes 去掉即可。1)修改目录配置:复制代码 代码如下:<Directory "D:/Apache/blog.phpha.com"> Op

  • tomcat 下的虚拟目录 禁止通过url访问到文件列表

    tomcat配置了虚拟目录,发现通过url能够直接访问目录下的文件列表,而同事的却不能直接访问。解决方法: 将web.xml下的: 红色包括的“true”改成“false”即可

Global site tag (gtag.js) - Google Analytics