微信小程序中使用sass

使用脚本监听某个目录文件变化，把sass文件内容编译成wxss后缀的文件。

--assets（存放静态资源目录）

----scss（存放scss源文件目录）

----wxss（存放编译后的wxss文件目录）

Chokidar

>

1进入微信公众平台，注册小程序账号，根据提示填写对应的信息即可。

2注册成功后进入首页，在小程序发布流程->小程序开发与管理->配置服务器中，点击“开发者设置”。

3会获得一个AppID，记录AppID，后面创建项目时会用到。

注意：如果要以非管理员微信号在手机上体验该小程序，那么我们还需要 *** 作“绑定开发者”。即在“用户身份”-“开发者”模块，绑定上需要体验该小程序的微信号。本教程默认注册帐号、体验都是使用管理员微信号

二、下载微信web开发者工具

为了帮助开发者简单和高效地开发，微信小程序推出了全新的开发者工具，集成了开发调试、代码编辑及程序发布等功能。1下载页面：t=201715根据系统，选择对应的工具版本下载2工具包含编辑、调试和项目三个页卡：（1）编辑区可以对当前项目进行代码编写和文件的添加、删除以及重命名等基本 *** 作（2）程序调试主要有三大功能区：模拟器、调试工具和小程序 *** 作区（3）项目页卡主要有三大功能：显示当前项目细节、提交预览和提交上传和项目配置

注意：启动工具时，开发者需要使用已在后台绑定成功的微信号扫描二维码登录，后续所有的 *** 作都会基于这个微信帐号

三、编写小程序实例

1实例目录结构

2实例文件说明及源码一个小程序包含一个app（主体部分）和多个page（页面）（1）app是用来描述整体程序的，由三个文件组成，js后缀的是脚本文件，json后缀的文件是配置文件，wxss后缀的是样式表文件，必须放在项目的根目录。appjs是小程序的脚本代码（必须），可以在这个文件中监听并处理小程序的生命周期函数、声明全局变量，调用框架提供的丰富的API。

appjson是对整个小程序的全局配置（必须），用来对微信小程序进行全局配置，决定页面文件的路径、窗口表现、设置网络超时时间、设置多tab等。接受一个数组，每一项都是字符串，来指定小程序由哪些页面组成。微信小程序中的每一个页面的路径+页面名都需要写在appjson的pages中，且pages中的第一个页面是小程序的首页。

appwxss是整个小程序的公共样式表（非必须）。

（2）page是用来描述页面，一个页面由四个文件组成，这里以首页index为例，每一个小程序页面是由同路径下同名的四个不同后缀文件的组成，如：indexjs、indexwxml、indexwxss、indexjson。js后缀的文件是脚本文件，json后缀的文件是配置文件，wxss后缀的是样式表文件，wxml后缀的文件是页面结构文件。indexjs是页面的脚本文件（必须），在这个文件中我们可以监听并处理页面的生命周期函数、获取小程序实例，声明并处理数据，响应页面交互事件等。

indexwxml是页面结构文件（必须）。

indexwxss是页面样式表文件（非必须），当有页面样式表时，页面的样式表中的样式规则会层叠覆盖appwxss中的样式规则。如果不指定页面的样式表，也可以在页面的结构文件中直接使用appwxss中指定的样式规则。

indexjson是页面配置文件（非必须），当有页面的配置文件时，配置项在该页面会覆盖appjson的window中相同的配置项。如果没有指定的页面配置文件，则在该页面直接使用appjson中的默认配置。这里无需指定。Tips：a为了方便开发者减少配置项，小程序规定描述页面的这四个文件必须具有相同的路径与文件名b小程序提供了丰富的API，可以根据自己需求选择

四、测试小程序实例

1打开微信web开发者工具，选择“本地小程序项目”。2填写小程序的AppID，项目名称，选择第三步写好的小程序实例文件夹，点击“添加项目”。3如果出现如下效果，那么恭喜你，你的第一个小程序项目已经编写成功了！点击左侧边栏“编辑”，还可以在右侧编辑窗口直接对代码进行修改，保存（CTRL+S）后刷新（F5）即可生效。

4如果想看小程序项目在手机上的效果，点击左侧边栏“项目”，点击“预览”生成二维码，打开微信扫描，就可以看到了。

在视频中已经说过了，小程序的设计思想和原生app的设计思想颇为相似，基本的应用单元为页面。当然对于一个页面来说每一个元素的放置位置在哪儿以及显示成什么样子这个是由 样式来决定的 。我们知道在web开发中样式是在css文件中规定的，叫做层叠样式表 (Cascading Style Sheets)。其实在APP中样式的约束也是使用css，在支付宝小程序中也是使用css不过文件的后缀是acss而且对css3进行了扩充而已。

那么在支付宝小程序中的acss和微信小程序中的wxcss没有什么两样。 上边已经说了acss其实包含了css3那么它还有一些新的特性是css3中不具备的，让我们一一看看

第一次看到这个东西也能猜到他是干什么用的。在css中我们知道规定大小一般使用像素(px)这个单位。比如显示生活中我们说房子128㎡那这儿的单位是平方米，在开发中需要更加精准的大小就是px像素。像素就非常精细了因为在我们显示屏幕中像素是最小的显示单元。这个道理如果不懂的话就找个LED屏幕仔细看，LED屏幕上一个一个的发光二极管可以想象为像素。

我们知道手机屏幕有大有小，就拿iPhone来说，iPhone 6 plus比iPhone 5要大。那么就说明plus的像素比5要多。对比：

加入有一个160px宽度的红色矩形在这两种手机中的位置如下：

rpx（responsive pixel）可以根据屏幕宽度进行自适应。如何自适应呢？看下边的分析：

看下图：

在模块化开发中我们有时候不得不在页面中使用其他的第三方库的样式，而第三方库的样式是保存在第三方包中的，我们不可能全部复制到我们的acss文件中，那最好的办法就是导入了。在样式表中导入其他外联样式表。

当然仍旧支持内联样式和class属性制定样式类，如

选择器和css3的保持一致。一般有class=”test”类选择器和id=”test”的id选择器。当然在支付宝小程序的样式中特殊的地方就是：

※ a- 或者 am-为前缀的选择器已经被系统占用所以不要使用；

※ 不能使用属性选择器，例如,以下写法不被支持：

我之前说过小程序开发的应用单元为页面。其实我们在axml中写的页面并不包含页面容器，就相当于我们做一个页面但是body标签不用写那如果我们要改变整个页面的背景怎么办呢其实有一个固定的选择器。例如：

可以通过 page 元素选择器来设置页面容器的样式，比如页面背景色:

在你想改变页面容器的页面中定义该样式也可以，全局定义也可以，例如我想将test这个页面的页面容器背景设置为蓝色，就可以再pages目录下的test目录下找到testacss在其中定义page的样式

下节是视图层讲解，如果有任何问题可以再下方给我留言或者发邮件到 weiyongqiang@weiyongqiangcom 我在收到邮件后会回复。

问题一：微信小程序开发可以实现哪些功能 微信小程序的开发可以实现的功能很多，具体如下：

微信小程序（应用号）就是用户关注了一个应用号，就像安装了一个App一样。这样微信将被打造成一个全新的appstore，而每一个应用号就是一个个的webapp。

怎么理解这个概念？

下载安装 app 太麻烦了，微信的小程序就可以满足你；安装 / 卸载 / 使用小程序，就像关注 / 取关 / 进入公众号一样简单；你用完就可以走，不用担心装个 app 占你空间。

微信小程序（应用号）有几个功能？

1、微信小程序（应用号）能实现对App个性功能的完美支持。这项服务就是将App的独立功能通过微信应用号开放到微信生态里，供微信用户调用；如果有可能的话，未来微信应用号或许能提供一套接入系统，直接实现App功能的复制。

2、微信小程序（应用号）能实现对App开发者、运营者的友好接入，降低二次开发门槛；将有可能对开发者运营者开放更多资源，建立微信开发者生态。

3、赋予微信用户更灵活的功能获取与组合，让用户自己拼凑出一个符合自己使用的超级App。自动脑补一下：以后想要什么功能，在微信应用号里面搜出来，挂到微信上，不需要的就卸载掉。

4、打通微信与其他应用的账号体系，App自己做功能，基于微信做运营。

现在大多数App转到微信里的分享链接都不能直接打开，需要下载App后使用。应用号出来以后可能就不用这么麻烦了，看到朋友圈里谁分享的东西好玩，打开链接功能一键添加，完全不用费力气去跳转安装。

微信小程序是一种不需要下载安装即可使用的应用，它实现了应用“触手可及”的梦想，用户扫一扫或者搜一下即可打开应用。以后我们不需要再安装那么多APP了，一个微信，就可以囊括我们生活中几乎所有的应用。

问题二：怎么进行微信小程序开发设计 在进行微信小程序开发之前，你首先需要一个微信小程序账号，才能进行开发设计。

点击公众平台的链接，正登陆和注册之间，选择注册。你会看到有好几个选择，如订阅号、企业号、服务号和小程序，选择小程序点击确定；

小程序注册的前提是，没有注册过任何的微公众平，如未注册过订阅号、服务号之类的。邮箱要求也是“未被公众平台注册，未被开放平台注册，未被个人微信号绑定的邮箱”；

根据自己的信息，进行邮箱的填写和密码的输入。如果邮箱正确就没有错误提示，在明确密码以及重复确认密码之后，输入验证码，勾选协议就可以实现注册；

在点击注册之后，会有一个邮箱的验证，登录邮箱，在收件箱你会看到一个weixinteam的邮件，打开，点击验证链接。

点击验证链接之后，会直接跳转到注册的第三步，信息的登记填写，选择相应的小程序主体类型，可以看到只有四个选项，选择；

主体选择类型之后，可以看到需要类型、名称、营业等。如果是个人的话，可以随便写一下，到时候会验证失败，不影响小程序的测试，直接进行下面管理员信息登记；

在管理员身份认证的时候，需要填写身份z、姓名、手机号、以及手机号验证和微信管理员的身份验证等。

点击确定之后，会d出一个信息确认的消息（一经确定就不能更改的消息）。然后点击确定，就会告诉你信息填写完整，但是审核还未通过，但是可以测试小程序了。

进入主体之后，就可以各种测试、开发小程序了。当然如果上线测试的话，还是需要验证通过才可以。

问题三：微信小程序怎么开发用的是什么开发语言 30分 微 信小程序跟现在做微 信互动游戏一样的呀前端h5后台一般就用php就行了 这两个技术简单，功能上也能满足需求。

问题四：微信小程序的开发语言是什么？ 微信小程序 跟现在做微信互动游戏一样的呀 前端h5 后台一般就用php就行了 这两个技术简单，功能上也能满足需求。

问题五：微信小程序开发类型有哪些 生活服务类的大多都适合

问题六：微信小程序是什么？微信小程序有什么用 微信小程序是一种不需要下载安装即可使用的应用。特点：

它实现了应用“触手可及”的梦想，用户扫一扫或者搜一下即可打开应用。

也体现了“用完即走”的理念，用户不用关心是否安装太多应用的问题。

应用将无处不在，随时可用，但又无需安装卸载。

然而微信应用号要能获取足够多的用户，还得要开发者的支持。毫无疑问，开发者将是微信应用号的最大获益群体。对于开发者而言，应用号可以节省开发成本，并且可以提升研发效率，开发人员只需要研发出一款适用于浏览器应用的产品，就可满足不同 *** 作系统的使用需求。

问题七：微信小程序怎么开发 微信小程序开发教程分享 微信应用号（小程序，「应用号」的新称呼）终于来了！

目前还处于内测阶段，微信只邀请了部分企业参与封测。想必大家都关心应用号的最终形态到底是什么样子？怎样将一个「服务号」改造成为「小程序」？

我们暂时以一款简单的第三方工具的实例，来演示一下开发过程吧。

序言

开始开发应用号之前，先看看官方公布的「小程序」教程吧！（以下内容来自微信官方公布的「小程序」开发指南）

本文档将带你一步步创建完成一个微信小程序，并可以在手机上体验该小程序的实际效果。这个小程序的首页将会显示欢迎语以及当前用户的微信头像，点击头像，可以在新开的页面中查看当前小程序的启动日志。

1 获取微信小程序的 AppID

首先，我们需要拥有一个帐号，如果你能看到该文档，我们应当已经邀请并为你创建好一个帐号。注意不可直接使用服务号或订阅号的 AppID。 利用提供的帐号，登录 mpweixinqq ，就可以在网站的「设置」-「开发者设置」中，查看到微信小程序的 AppID 了。

注意：如果我们不是用注册时绑定的管理员微信号，在手机上体验该小程序。那么我们还需要 *** 作「绑定开发者」。即在「用户身份-开发者」模块，绑定上需要体验该小程序的微信号。本教程默认注册帐号、体验都是使用管理员微信号。

2 创建项目

我们需要通过开发者工具，来完成小程序创建和代码编辑。

开发者工具安装完成后，打开并使用微信扫码登录。选择创建「项目」，填入上文获取到的 AppID，设置一个本地项目的名称（非小程序名称），比如「我的第一个项目」，并选择一个本地的文件夹作为代码存储的目录，点击「新建项目」就可以了。

为方便初学者了解微信小程序的基本代码结构，在创建过程中，如果选择的本地文件夹是个空文件夹，开发者工具会提示，是否需要创建一个 quick start 项目。选择「是」，开发者工具会帮助我们在开发目录里生成一个简单的 demo。

项目创建成功后，我们就可以点击该项目，进入并看到完整的开发者工具界面，点击左侧导航，在「编辑」里可以查看和编辑我们的代码，在「调试」里可以测试代码并模拟小程序在微信客户端效果，在「项目」里可以发送到手机里预览实际效果。

3 编写代码

点击开发者工具左侧导航的「编辑」，我们可以看到这个项目，已经初始化并包含了一些简单的代码文件。最关键也是必不可少的，是 appjs、appjson、appwxss 这三个。其中，js 后缀的是脚本文件，json 后缀的文件是配置文件，wxss 后缀的是样式表文件。微信小程序会读取这些文件，并生成小程序实例。

下面我们简单了解这三个文件的功能，方便修改以及从头开发自己的微信小程序。

appjs 是小程序的脚本代码。我们可以在这个文件中监听并处理小程序的生命周期函数、声明全局变量。调用 MINA 提供的丰富的 API，如本例的同步存储及同步读取本地数据。

appjs App({

onLaunch: function () { 调用API从本地缓存中获取数据 var logs = wxgetStorageSync('logs') || []

logsunshift(Datenow())

wxsetStorageSync('logs', logs)

>>

问题八：为什么要做微信小程序开发 服务号无法解决高频使用的问题

按照微信的期待，订阅号本应为用户提供内容，但被玩出了各种营销和电商的花；服务号本应为用户提供各种服务，但真正做起来的服务号却少之又少，你可能听说过不少 VC 投资订阅号，但很少有 VC 投资服务号。

服务号发展得并不好。大多数服务号只是在做替代短信的推送服务和低频服务。

比如，被视作经典案例的招商银行xyk公众号，用户的使用场景以收通知为主，它只不过替代了刷卡短信通知，其它功能很少被用到。

不妨想想我们为什么会 下载 一个产品的 app，而不用它服务号里一模一样的功能：

体验差，HTML 的体验比不上原生、流畅性差

层级多，App 一打开就是服务目录，服务号需要多进至少一层

对网络过于依赖，没有网络，服务号无法使用

对于低频使用的场景，即使体验差、层级多、每次都需要联网，用户是可以忍受的，比如查询xyk额度，这种行为可能每个月只有一两次，即使网页的体验很差，但我们能忍受。

但对于高频使用场景，比如文档编辑，我们每天可能需要使用很多次，这时我们对体验、速度、稳定性显然有更高的要求，服务号和 HTML 并不能完美满足这些要求。

矛盾来了，微信希望第三方用服务号来为用户提供服务，但从功能层面，服务号却只解决了低频服务的需求，高频服务用户依然需要下载 app。

这时，微信需要提供另一种能力，来满足高频服务的需求。

微信想成为唯一的入口

为什么微信非要满足高频服务的需求？

因为商业是贪婪的，商业的最终目的是垄断。

8 亿活跃用户对微信来说是不够的，一天只占用用户 4 个小时对微信来说也是不够的，光提供xyk消费通知对微信来说还是不够的。

微信想要更多，腾讯想要更多。当微信已经是超级入口，它想变成唯一的超级入口，它要占据你更多的时间和使用场景。它可能永远不会做一个 OS，但它希望成为「事实上」的 OS。

小程序是微信成为事实 OS 的必要补充。因为它的诞生是为了满足服务号没有满足好的高频应用场景。

所以，三管齐下，微信希望占据：

更多用户时间

更多应用场景

更多服务入口

订阅号解决阅读需求，服务号满足低频服务需求，小程序定位在高频使用场景。

听起来很恐怖，但恐怕没有人能在短期内阻止微信成为事实 OS。

小程序是一个独立生态

1小程序是微信接下来的重点产品

2无关注，无心理压力

和服务号、订阅号不一样，小程序是没有关注功能的。这意味着，对用户来说，心理成本更小，用户通过搜索进入小程序，马上就可以使用，不像服务号还需要先关注。

3不是 HTML5，也不是 Hybrid

4没有外链

5无法分享到朋友圈

6用微信语言开发的原生程序

7前端开发成本极低

8离线使用与 Websocket 的想象力

9没有游戏，没有直播

10有审核机制

问题九：微信小程序个人适合开发什么产品 指尖小程序认为微信小程序开发比较适合线下有实体店的商家开发，如果个人开发的话，微商这样的商城类的小程序也比较适合。希望采纳哦

问题十：微信小程序开发 使用什么编辑器 小程序开发工具提供 Windows 32 位、Windows 64 位和 Mac 三个版本。可根据实际情况，选择适合自己电脑的开发工具。

微信开发者工具共分成「编辑」、「调试」和「项目」三个部分。

编辑：编辑和修改小程序的代码。

调试：显示小程序代码错误和警告，便于调试代码错误。

项目：用于查看小程序的属性、修改小程序配置，以及提交小程序代码至微信服务器。

不是。根据查询相关公开信息显示，appts与appjs分别表示静态和动态。前者需要静态编译，它提供了强类型与更多面向对象的内容，没有重载概念，后者有可以重载，动态类语言相对更灵活。

以上就是关于微信小程序中使用sass全部的内容，包括:微信小程序中使用sass、如何给后缀为EXE的小程序添加序列号、微信小程序开发教程等相关内容解答，如果想了解更多相关内容，可以关注我们，你们的支持是我们更新的动力！