我们会发现，如果不使用任何预处理语言，我们写代码会一连串很长又乱或者写着写着会很难一眼找到你想要的类名称，所以我们使用了预处理语言后，会提高我们开发效率和易维护代码，以下内容就是教你如何使用gulp处理scss预处理语言。内容很精彩千万别走开，不仅仅可以在小程序里面使用，还可以在其它地方使用。 安装gulp 全局安装gulp [代码]npm install --global gulp-cli[代码] 在项目目录下创建 package.json 文件 [代码]npm init[代码] 安装 gulp，作为开发时依赖项 安装gulp依赖 [代码]npm install --save-dev gulp[代码] 安装修改文件名依赖 [代码]npm install --save-dev gulp-rename[代码] 安装sass依赖 [代码]npm install sass gulp-sass --save-dev[代码] 安装no-sass,因为gulp-sass需要 [代码]npm install --save-dev node-sass[代码] 最后一步，终端输入gulp即可跑起?，好像缺少了必要配置文件，所有你是跑不起的，继续往下看哈 配置文件 在项目目录下，我们先创建一个文件叫[代码]gulpfile.js[代码]，配置内容如下：更多gulp配置解说可以查看官方文档 [代码]const gulp = require('gulp'); const sass = require('gulp-sass')(require('sass')); const rename = require('gulp-rename'); const { src, dest, watch } = gulp; const scssFiles = ['**/*.scss', '!node_modules/**']; const compileSCSS = function() { // 所有文件夹下得scss文件,排除components目录,排除node_modules目录 return src(scssFiles) .pipe(sass().on('error', sass.logError)) .pipe(rename({extname: '.wxss'})) .pipe(dest('./', {overwrite: true})); // 编译出来的文件放回scss文件所在目录 }; module.exports.default = function() { watch(scssFiles, compileSCSS) }; [代码] 按照上面安装和配置完成即可得到你想要的gulp把.scss打包成.wxss，这里有写热更新保存文件即可打包输出.wxss文件，然后去当前项目终端输入gulp，一个简单的打包工具完成了~ 小程序上传代码过滤 *.scss文件，避免我们小程序包过大 我们要找到文件[代码]project.config.js[代码]文件，然后在[代码]packOptions[代码]下的一个属性叫[代码]ignore[代码]写正则去过滤我们不需要的文件，减少小程序上传包的大小，例如下面简单示例： [代码]"packOptions": { "ignore": [ { "type": "regexp", "value": "\\.scss$" }, { "type": "file", "value": "package-lock.json" }, { "type": "file", "value": "gulpfile.js" } ] } [代码] 可能运行时报错及解决方法 如果你是安装依赖[代码]"gulp-sass": "^4.0.0"[代码]，你的配置文件[代码]gulpfile.js[代码]的引入模块自定义变量sass可以写成[代码]const sass = require('gulp-sass')[代码] 但是如果你安装依赖[代码]"gulp-sass": "^5.0.0"[代码]及以上我们配置文件[代码]gulpfile.js[代码]的引入模块自定义变量sass必须这样写[代码]const sass = require('gulp-sass')(require('sass'));[代码],否者会报错，因为gulp sass 5没有默认的sass编译器，下面是错误提示： [代码]gulp-sass 5 does not have a default Sass compiler; please set one yourself. Both the `sass` and `node-sass` packages are permitted. [代码] 结束语 如果看完还不会，可以留言哦，项目会推送到gitee欢迎查看或者start~ 如果想看更多小程序内容，也可以去我的掘金号查看查看，本文也会同步过去 有进步，感觉有用记得点个赞哦

自定义一个跳转方法思路：如果跳转的url是小程序页面栈已有的页面，则用wx.navigateBack的方式回退到那一层 wx.navigateBack相当于手动修改页面栈，将url后面的所有页面栈都删掉。 goPage(url) { // 如果这个小程序，入口页面用的不多的话，可以忽略掉indexUrl，不做判断 var indexUrl ="pages/index/index" // 小程序入口页面 var page = getCurrentPages(); // 获取到小程序的页面栈 var delta = -1; // 如果要跳转的url是入口页面，并且页面栈大于2，用回退的方式，清除页面栈内容 if(page.length>2 && indexUrl==url){ for(var i=0;i<page.length;i++){ if(url==page[i].route){ //入口页面的索引i delta = page.length - i -1 // 算出要回退几步回到 入口页面 break } } } // 回退-1步的话，表示页面栈 里面没有首页 if(delta==-1){ wx.navigateTo({ url: url }) }else{ wx.navigateBack({ delta: delta }) } } 其他优化方法： 入口页面的写法：组建tabbar，首页和我的都写成组建的形式。这种写法，在首页和我的页面切换的时候，不会使用wx.navigateTo ，不占用跳转的栈内存。 <home wx:if="{{PageCur=='0'}}" params="{{params}}" bind:changeTab="changeTab"></home> <mine wx:if="{{PageCur=='1'}}" params="{{params}}"></mine> <tabbar id="tabbar" tabNum="{{PageCur}}" bind:clickFun="changeTab"></tabbar> wx.redirectTo方法 代替 navigateTo 减少一层栈的使用，但是跳转的页面没有返回按钮。

对于像我这样少数民族开发者来说，经常会遇到一些项目要求多语言、国家化。正好最近有一个项目，需要国语和维吾尔语之间进行切换。 根据微信官方给出的国际化工具类库很快做到了国际化。但是我们这个项目有tabBar，而且，tabBar 需要我们自定义，因为手机自带的字体太过于难看（对于维吾尔文来说，系统自带的字体太难看了）。而且tabBar原生不支持指定font-face属性。几乎所有的原生组件都无法指定font-face属性。所以我们只能自定义tabBar了。有点扯远了，回归问题本身。 当tabBar进行自定义之后，国际化类库不好使了。页面其他位置的国际化切换的都很流畅，唯独tabBar就没生效。也不知道是什么原因。最终通过国际化类库提供的 语言切换时触发的回调函数哪儿做到了同步切换。免得大家以后多走弯路，我把本次经验分享出来了。如果有什么不对的，希望不要骂我，我也是一个学者。谢谢各路神仙听我胡扯！ ready(){ // 页面加载完毕后更新一下tabbar列表数据 this.updateTabList(); // 切换语言是再次进行更新tabbar列表数据 this.onLocaleChange(()=>{ this.updateTabList(); }) }

小程序如何实现国际化？按官方文档走，完全弄不出结果来，到处报错。。 通过GitHub 下载的example demo 也是无法正常使用，构建无法构建，到处找不到引入。期望官方给出实现的清晰思路方法。。 [图片] [图片] [图片] 使用 gulp  小程序构建目录下的报错。隐藏掉 index.wxml 文件引用 wxs 后，打印出 设置的语言， 例如 en。实际上还是不知道怎么去运用起来，期望官方能提供更准确的解决思路。按文档步骤走，仍未走通，问题无法解决 [代码]  // 小程序构建目录[代码] [图片] [图片] [图片]

微信纯H5签约唤起签约页面后，重新返回到唤起页面，iphone13 或某些浏览器直接返回域名根目录下了。而不是当前唤起页面。

小程序的界面是由一系列组件构成的。小程序基础库提供了一组基础组件来满足开发者的基本需求。但随着小程序开发变得越来越复杂，单纯使用基础组件来进行开发也变得越来越不方便。 例如，较为复杂的小程序中常常会有一些通用的交互模块，比如“下拉选择列表”、“搜索框”、“日期选择器”等。这些界面交互模块可能会在多个页面中用到，逻辑也相对独立。然而，用传统的小程序开发方法来实现这样的模块是非常繁琐的。 面对这个情况，小程序基础库提供了让开发者自己创建界面组件的特性，称之为“自定义组件”。通过这个特性，开发者就能够将这样的交互模块抽象成界面组件，使界面代码组织变得非常灵活。 01 [图片]开发者可以将一些复用性强的代码抽象成自定义组件，它们的使用方法与基础库内置的 view 、 button等基础组件非常相似。这样的组件化非常有利于代码逻辑的解耦合。 02 [图片]自定义组件局部更新时的性能相比页面的局部更新要小很多，在必要时可以利用这个特点进行性能优化。 03 [图片]自定义组件是相对独立的功能模块，开发者可以将自己的自定义组件代码开源出来，与其他开发者共享开发成果。 如何编写一个自定义组件？ 每个自定义组件由四个代码文件组成：  json文件    用于于放置一些最基本的组件配置  wxml 文件    组件模版  wxss 文件    组件的样式，只在组件内部节点上生效（这个文件是可选的） js 文件  组件的 JS 代码，承载组件的主要逻辑 这四个文件与编写一个页面时用到的四个文件非常类似，但也有区别。下面将介绍如何利用这四个文件编写一个简单的自定义组件。 1.组件配置 编写一个自定义组件，首先应在小程序代码目录中合适的位置创建一个 json 文件。这里我们把文件放置在小程序的 components目录下，名为 custom-checkbox.json 。 [图片] 这个文件中包含以下内容： [图片] 2.组件模板 在同一目录下，创建一个模版文件 custom-checkbox.wxml 。这个文件的写法与页面模版很类似： [图片] 这个模版将在组件中渲染出一个 checkbox 和一个 label 。 3.组件样式 同样类似于页面， wxss 文件中可以指定组件节点的样式。其中的样式仅在组件内部生效。需要注意的是，样式只能通过类选择器（如 .the-class-name ）来指定： [图片] 4.组件定义 组件的 JS 文件中必须包含组件定义。定义时使用 Component 构造器： [图片] 简单的 Component 构造器调用包含3个定义段： methods 中的方法可以用来包含组件的事件回调函数； data 是组件的内部数据，可以用 this.setData 方法来改变； properties 中声明这个组件的属性，上例中声明了 title 属性，这样，组件外部在使用组件时就可以指定这个属性的值。 这样我们就编写好了 custom-checkbox 这个组件。 如何使用自定义组件？ 使用上面这个自定义组件的方法很简单。 Step 1 在需要使用这个组件的页面所对应的 json 文件中，添加下面的自定义组件声明： [图片] Step 2 在页面对应的 wxml 文件中使用了： [图片] 这样，在页面上最终呈现的效果如下： [图片] 在自定义组件中也是可以引用其他自定义组件的，方法与在页面中引用的方法类似。 高级特性与注意事项 除了上述的基本功能外，自定义组件还提供了一组基础接口，用来实现各种各样的功能。 01 [图片]在页面和自定义组件间通信时，最常用的方法是事件机制，自定义组件可以使用 triggerEvent 接口向页面发送事件，页面 WXML 中使用 bind 或者 catch 就可以监听到。 02 [图片]如果事件机制还不足以满足组件间通信需要的话，可以使用  selectComponent 接口。 03 [图片]如果同时建立了好几个有相互关联关系的组件，可以使用组件间关系接口 relations 。 04 [图片]组件间可能需要共享部分代码，这时可以使用behaviors 。 有关它们的详细文档，请参考 开发者文档 - 框架 - 自定义组件 章节。 还需要注意的是，一些与 WXML 节点相关的接口，如wx.createSelectorQuery  、 wx.createCanvasContext ，在自定义组件中使用时有一定的变化，使用时请再次阅读一下相关的文档。