微信小程序限制1m的瘦身技巧与方法详解

微信小程序有很多局限性，正因为这些局限性，给大家带来了很多不便。希望有一些方法和技巧可以帮助你突破这些局限。，小编已经收集了上限为100万的微信小程序技巧和方法的详细说明。需要帮助的朋友可以来看看。

微信小程序瘦*方法详解：微信小程序发布时，提交的代码有1m的限制，给我们留下了一个bug。当你用稍微复杂一点的函数程序编写小程序时，你必须时刻注意你的小程序代码是否会触及底线。否则，你不能写下来。

在设计一个小程序时，我们需要关注这一点，并采取一些措施来避免超出限制。

避免使用本地大图片和大资源文件

请避免在小程序的ui上使用大图，尽量用颜色风格来装饰你的小程序：或者用小巧精致的小图标来装饰；如果你真的想用大图，请不要把图片放在小程序的本地代码中，而是从远程url地址加载图片

这样可以避免将大图片和大资源文件打包到小程序的分发包中。

不要让你的代码过于冗长

在javascript代码层面，请仔细考虑你的代码逻辑，不要写很多简单的逻辑，请优化和精简你的代码。

在视图级别，尽可能避免不必要的组件嵌套。如果可以用一个视图来完成，就不要设置另一个视图层。这有利于减少代码大小和代码性能：)

使用工具压缩优化的代码

在html5等web前端项目的开发和发布的，我们通常使用一些前端工程工具来处理我们的代码，比如大口，结合一些功能插件，比如uglify、cssnano、htmlmin等。使用这些工具，我们可以将代码的大小减少很多(大约20%~30%)。

幸运的是，这些工具对于小程序开发也完全有用！通过简单地使用这些工具，我们可以大大减少代码，为什么不呢？

在小程序中，我们大致有几种类型的文件可以通过工具进行优化：

json文件

我们可以使用jsonminify压缩json文件，并删除json文件中的额外空间

javascript文件

使用uglify优化语法并压缩js代码的文本

wxml文件

使用htmlmin，您可以清除wxml文件中多余的空格和注释

wxss文件

您可以使用less提供的功能将全局wxs合并到小程序中；使用cssnano清理和压缩wxss文件；autoprefixer用于向wxss添加不同环境中的前缀，以实现良好的兼容性

图象档案

imagemin可用于优化图片文件的大小

愚蠢，这里有一个大口脚本供你参考，如下：

package.json

微信小程序的瘦*方法真的能做到瘦*吗？让我们试一试。的分享就到这里。希望对你有帮助。如果您对微信小程序有疑问，请在文章底部给我们留言。源代理网的小程序频道会给你带来更多精彩的文章。

下面是标题开头微信小程序的开发情况，下面是标题结尾

对于小程序开发者来说，微信小程序商店有很多小程序开发的教程，但是开发微信小程序的条件是什么？我们来看看。

一，小程序的基本概念

1.开发工具：为了配合小程序的开发，微信专门配备了自己的开发工具，选择相应的版本安装。

2.创建项目应用程序：安装完成后，打开并扫描代码登录。小程序发布需要企业级认证微信账号，个人订阅号无法发布。因此，我在这里选择无appid，选择一个本地空文件夹来创建项目，并选中创建快速启动项目来生成演示。

3.写一个小程序：demo初始化，包含一些简单的代码文件，其中app.js、app.json、app.wxss必不可少，小程序会读取这些文件的初始化例子。

app.js是一个小程序初始化脚本，可以监控小程序的生命周期，申请全局变量，调用这个文件中的api

app.json是小程序的全局配置。pages设置页面路径组成(第一页默认为第一页)，window设置默认页面的窗口表示等

app.wxss是整个小程序的通用样式表。类似于网站开发中的common.css

4.创建一个页面：在pages目录下，它由一个文件夹中的四个同名不同类型的文件组成。js是一个脚本文件。json是一个配置文件。wxss是一个样式表文件。wxml是一个页面结构文件，其中json和wxss文件是不需要的(默认会继承app的json和wxss的默认设置)。

二、小程序的框架

1.小程序的配置

app.json主要分为五个部分：页面：页面组，窗口：框架样式(状态栏、导航栏、标题、窗口背景色)，tabbar:底部菜单，networktimeout:网络超时设置，debug:开启调试模式

page.json是为页面单独设置的，app.json的全局设置是堆叠的

//app.json{

第' :页[

页面/索引/索引'，'页面/日志/日志'

],

window':{

背景textstyle':'light '，navigation barbakgroundcolor ' : ' # 000 '，navigationbartitletext': '微信'，navigation bartexstyle ' : ' white '

}

}

2.小程序的逻辑

要使用app注册一个小程序，必须在app.js中注册，不能注册多个

app({//以下是小程序的生命周期

onlaunch:函数{}，///侦听初始化

onshow:函数{}，//监控显示(进入前台)

onhide:功能{}，//听隐藏(进入后台：按home离开微信)

onerror:函数(msg) {}，//侦听错误

//以下是用户定义的全局方法和全局变量

globalfun:function{}，globaldata:“我是全局数据”

})

使用page注册一个页面，并将其注册到每个页面的js文件中

页面({

data: {text: '这是pagedata，'}、//页面数据，用于维护视图，json格式

onload:函数(选项){}，//监控负载

onready:函数{}，//监控第一次渲染的完成情况

onshow:功能{}，//监控显示

onhide:函数{}，//监听隐藏

onunload:函数{}，//监听卸载

onpulldownrefresh :函数{}，//听下拉

onreacquotom :函数{}，//听上拉触底

onshareappmessage :函数{}，//右上角听分享

//以下是用户定义的事件处理函数(绑定在视图中)

viewtap:函数{//setdata设置数据值，视图同时更新

this.setdata({text: '为更新视图设置了一些数据。})

}

})

3.小程序的视图与事件绑定

在每个页面的wxml文件中，对页面js中的数据执行数据绑定和自定义事件绑定

{{text}}

{{item}}

网络视图

应用

迈纳

名字： { {名字}}，姓氏： { {姓氏}}

指给我看。指给我看

页面({

data : {//数据数据主要用于视图绑定

文本：“我是一个测试”，array:[0，1，2，3，4]，view:'app '，模板：{

staffa : { first name : ' hulk '，lastname: 'hu'}，staff : { first name : ' shang '，lastname: 'you'}

}

},

viewtap:函数{console.log('嗯，轮到我了~ ')}//自定义事件，主要用于事件绑定

})

4.小程序的样式

在每一页的wxss文件中，wxml中的结构是样式化的，相当于css，扩展了rpx单元。其中app.wxss默认为全局样式，适用于所有页面。

第三，小程序其实是打架

先看完成后的效果，一共三页，测试演示不好看，不喜勿喷~

1.设置底部菜单和页面

我们可以基于快速启动生成的演示来修改它，因为它涉及图标图标，我们创建了一个新的图像文件夹来存储图片

在原先页文件夹中，删除指数和原木页面文件夹，新建天气、城市、关于三个页面文件夹，及三个页面对应的四个文件类型，文件结构如下图

接下来配置app.json文件

/*app.json，该文件不能含有注释，所以正式应用需删除所有注释内容*/

{

pages':[//小程序的页面路径数组，第一条默认为首页，所有页面均需写在这里，否则不能加载

页数/天气/天气，页数/关于/关于，'页数/城市/城市'

],

window':{//小程序框架设置

导航barbakgroundcolor ' : ' # 000 '，navigationbartitletext': '天气预报，导航bartexstyle ' : ' # fff '，backgroundcolor':'#666 '，背景textstyle':'light '，enablepulldownrefresh ' :true路径路径

},

tabbar': {//小程序底部菜单设置

颜色' : '#666 ',

选择颜色： '#56abe4 '，backgroundcolor': '# '，borderstyle': '黑色，list': [{

页面路径' : '页面/天气/天气，图标路径' : '图像/标签栏/天气1。' png '，选择edicinpath ' : '图像/标签栏/天气2。' png '，文本":"天气预报'

}, {

页面路径' : '页面/城市/城市，图标路径' : '图像/标签栏/城市。' png '，选择电子路径' : '图像/tab bar/city。' png '，文本":"设置城市'

}, {

页面路径' : '页面

s/约/约'，icon path ' : ' images/tab bar/about 1 . png '，请选择edicinpath ' : ' images/tab bar/about 2 . png '，短信' : '关于我'

}],

位置' : '底部'

}

}

2.注册小程序和整体样式

如下修改app.js和app.wxss文件

//app.js

app({

//1.系统事件

onlaunch:函数{///在applet初始化时执行

that=this

that . curid=wx . getstorageync(' curid ')| | that . curid；//api:获取本地缓存，如果不存在则设置为全局属性。

that.setlocal('curid '，that . curid)；//调用全局方法

},

//2.自定义全局方法

setlocal:function(id，val){

wx . setstorageync(id，val)；//api:设置本地缓存

},

//3.自定义全局属性

curid:'cn101010100 '，版本：'1.0 '

})

/**app.wxss**/。容器{ margin : 0；padd : 0；}。title { font-size : 14px；font-weight : bold；}

3.页面结构(wxml)、样式(wxss)、逻辑(js)和配置(json)

小程序中的wxml抛弃html标签，使用视图(类似div)、文本(类似span)、图标等。类用html指定样式，bindtap绑定事件(类似onclick)，此页面没有特殊配置，json文件内容为空(非必要文件)

当前城市：{{basic.city}}

{{basic.update.loc}}

/**weather.wxss**/。城市{ padd : 3% 5%；背景# }。城市文本{ font-size : 16px；color: # 666}。城市。更新{ font-size : 12px；向右浮动：}

//weather.js

var app=getapp//获取当前小程序实例，方便使用全局方法和属性

页面({

//1.页面数据部分将绑定到视图wxml

data: {cur _ id:app。curid，basic: " "，now : " " }，//设置页面数据，显示页面时请求服务器会获取后面的null值。

//2，系统事件

onshow:function{

that=this

wx . show toast({ title : ' loading '，icon :' loading '，duration : 10000 })//设置加载模式框

that.getnow(函数(d){//回调函数，根据数据设置页面数据，更新到视图

wx.hidetoast//隐藏加载框

d . now . cond . src=' http://files . heweather.com/cond _ icon/' d . now . cond . code '。png '；

that . setdata({ basic :d . basic，now 3360d . now })//更新数据，视图同步更新

})},

//3.用户自定义页面方法：获取当前天气api

getnow:function(fn){

wx.request({//request server，类似品牌ax)

url : ' https://free-api . heweather.com/v5/now '，data: { city:app。curid，key : ' 01 a 7798 b 060 b 468 abd 006 ea 3d e 4713 ' }，//用户密钥在大风天气提供，可自行注册获取。

header : { ' content-type ' : ' application/json ' }，success : function(res){ fn(res . data . heweather 5[0])；}//成功后，将数据传递给回调函数执行

})

}，//4，页面事件绑定部分

bindviewtap3360函数{wx.switchtab ({url: './city/city ' })}//跳转到菜单页面

})

4.注意防坑

跳转刷新页面：应该用onshow而不是onload来执行逻辑，第一次打开页面时onload只执行一次。例如，页面b操作全局数据并跳转到页面a，并且全局数据的更新视图在页面a上获得.

新手怎么做

小程序有什么用怎么用？

有时候我想让一些线下的客户上线，但是阿里巴巴不是在客户手机上的。这时候小程序旺铺的作用就出来了

为什么后台的小程序爆款实验室消失了？

几个月前就消失了，相关营销取而代之

小程序现在很流行 这样做有用吗？

小节目也会有一定的效果，但也需要有代价的推广。如果站内推广正在进行，你想扩大推广范围，可以尝试去做。如果不做站内推广，没必要做小节目。车站是排水的主战场。希望我的回答能让你满意！

支付宝小程序是不是流失很多？

这个还挺多的。