微信小程序那些开发缺点
早闻微信小程序是个坑,结果名不虚传,细数一下我开发小程序遇过到坑。
UI组件过度封装。
微信小程序的组件是模仿react.js或vue.js的web组件设计的,并且封装了weui.css样式。
PS:实现自定义多选或多选。(看微信小程序开发社区的问题,没有很完整的解决方案,于是自己摸索了一个方法)
wxml
<checkbox-group class="checkbox-group">
<label class="checkbox-label">
<checkbox value="A"></checkbox>
<view class='checkbox-text'>A</view>
</label>
<label class="checkbox-label">
<checkbox value="B"></checkbox>
<view class='checkbox-text'>B</view>
</label>
<label class="checkbox-label">
<checkbox value="C"></checkbox>
<view class='checkbox-text'>C</view>
</label>
</checkbox-group>
wxss
.checkbox-group {
display: flex;
flex-wrap: wrap;
} .checkbox-label {
width: 33.333%;
} .checkbox-text {
background: #fff;
position: relative;
text-align: center;
border: 1px solid #000;
} checkbox {
display: none;
} checkbox[checked]+.checkbox-text {
color: #fff;
background: red;
border: 1px solid #000;
}
效果
语法糖是各种前端框架的大杂烩。
魔改html标签
<text class="user-name">Sroot</text>
类vuejs数据绑定
wxml
<view> {{ message }} </view>
wxs
this.setData({ message : "Hello World" })
类vuejs生命周期
小程序有app、page、组件生命周期。
wxs
//app
App({
onLaunch(options) {
// 生命周期回调——监听小程序初始化。
},
onShow(options) {
// 生命周期回调——监听小程序启动或切前台。
},
onHide() {
// 生命周期回调——监听小程序切后台。
}
}) //page
Page({
onLoad: function(options) {
// 生命周期回调—监听页面加载。
},
onShow: function() {
// 生命周期回调—监听页面显示。
},
onReady: function() {
// 生命周期回调—监听页面初次渲染完成。
},
onHide: function() {
// 生命周期回调—监听页面隐藏。
},
onUnload: function() {
// 生命周期回调—监听页面卸载。
}
}) //Component 新版写法
Component({
lifetimes: {
created: function() {
//在组件实例刚刚被创建时执行。
},
attached: function() {
//在组件实例进入页面节点树时执行。
},
ready: function() {
//在组件在视图层布局完成后执行。
},
moved: function() {
//在组件实例被移动到节点树另一个位置时执行。
},
detached: function() {
//在组件实例被从页面节点树移除时执行。
}
}
})
类reactjs与vuejs模板
wxml模板定义
<template name="XXX">
<view>
<text> name: {{name}} </text>
</view>
</template>
wxml模板定义
<template is="XXX" data="{{name}}"/>
wxs
Page({
data: {
name: "Sroot"
}
})
不支持图片文件的相对路径引用。
/* 错误 */
.logo {
background: url('img/logo.png');
} /* 正确 */
/* 方法一 */
.logo {
background: url('http://www.sroot.com/img/logo.png');
} /* 方法二 */
.logo {
background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAFgAAABYCAYAAABxlTA0AAAKQ2lDQ1BJQ0MgcHJvZmlsZQAAeNqdU3dYk/cWPt/3ZQ9WQtjwsZdsgQAiI6wIyBBZohCSAGGEEBJAxYWIClYUFRGcSFXEgtUKSJ2I4qAouGdBiohai1VcOO4f3Ke1fXrv7e371/u855zn/M55zw+);
}
PS:<image>组件支持相对路径引入。
<image src="./../../assets/img/logo.png"></image>
不支持Cookie本地缓存。
只能用Storage,不能用Cookie存储数据。(cookie最大优势就是可以设置是否可修改与设置过期时间)
PS:如果是独立账号登陆的微信小程序,只能采用微信小程序API提供的localstorage存储登陆数据。
补充:看文档。
wx.setStorage({
key:"key",
data:"value"
}) try {
wx.setStorageSync('key', 'value')
} catch (e) { } //错误写法
wx.setStorageSync({
key:"key",
data:"value"
})
页面跳转。
wx.redirectTo 关闭当前页面,跳转到应用内的某个页面。
wx.navigateTo 保留当前页面,跳转到应用内的某个页面。
wx.navigateBack 关闭当前页面,返回上一页面或多级页面。
PS:多用wx.navigateTo与wx.navigateBack,少用wx.redirectTo。
仅支持基本的元素选择器。
PS:相邻兄弟选择器好像也是支持的。
解析转义字符
<text decode='true'>{{ content }}</text>
原生组件页面层级。
这些原生组件在小程序页面层级是最高,无法设置z-index属性来控制。
解决方法:所有原生组件:采用显示隐藏的方式,控制原生组件的显示与隐藏。
cover-view与cover-image组件:不能使用条件渲染,采用opacity控制显示,不容易影响布局。
PS:微信开发者工具是不能模拟原生组件看效果。
强烈建议真机测试。
wx.onSocketMessage()与SocketTask.onMessage(function callback)区别。
PS: 建议使用SocketTask.onMessage()监听消息。
wx.onSocketMessage(function callback) 是旧基础库(1.7.0 )的WebSocket方法。
SocketTask.onMessage(function callback) 是新基础库(1.7.0 以上)的WebSocket方法。
补充:WebSocket方法放在页面生命周期的onLoad方法中执行。
某些元素之间有间隙。
常见于video组件,image组件。
解决方法:把元素设置display:flex或block。
PS:建议重置小程序样式。
调试页面比较麻烦。
不同于微信公众号页面,不能直接从地址栏访问某个页面,只能编译第一个页面。
解决方法:(1)在微信开发者工具设置“添加编译模式”。
(2)填写相应参数。
(3)选择对应编译模式,就可以直接运行某个页面调试。
PS:也可以通过project.config.json文件设置页面。
{
...
"condition": {
...
"miniprogram": {
"current": -1,
"list": [
{
"id": -1,
"name": "hello",
"pathName": "pages/index/index",
"query": "",
"scene": null
},
{
"id": -1,
"name": "detail",
"pathName": "pages/detail/index",
"query": "",
"scene": null
}
]
}
}
}
微信小程序在真机上无法调用接口。
登陆微信管理后台。
检查小程序信息填写是否填写正确或完整。
检查小程序合法域名是否填写正确或完整。(建议https域名)
PS:记得同步一下"微信开发者工具"项目。
微信小程序发布需要审核。
小程序应用发布与移动应用商店发布流程相似,需要审核才能发布。
PS:如果是以独立账号登陆(不是微信授权登陆)使用的微信小程序,需要提交审核两次,第二次提交审核才会出现填写提供测试账号。(什么鬼逻辑,第一次不能直接提供吗)
代码审核通过之后,请记得在微信管理后台把小程序发布,这样才可以在微信搜索得到自己的小程序应用。
微信小程序那些开发缺点的更多相关文章
- 微信小程序如何开发制作
微信小程序如何开发制作 微容SMO是一款微信小程序的免费在线制作工具,用户在微容平台上无需编辑代码,可通过拖拽式操作即可完成小程序的制作,真正意义上实现了小程序零代码免费制作! 消除技术门槛:无需代码 ...
- 【推荐】开源项目minapp-重新定义微信小程序的开发
minapp 重新定义微信小程序的开发 官网:https://qiu8310.github.io/minapp/ 作者:Mora minapp 重新定义微信小程序的开发 使用 用 npm 安装命令行工 ...
- 微信小程序快速开发上手
微信小程序快速开发上手 介绍: 从实战开发角度,完整系统地介绍了小程序的开发环境.小程序的结构.小程序的组件与小程序的API,并提供了多个开发实例帮助读者快速掌握小程序的开发技能,并能自己动手开发出小 ...
- 微信小程序wepy开发循环wx:for需要注意
微信小程序wepy开发循环wx:for需要注意 item index值必须在wx:for之后使用 <view wx:for="{{tablist}}" class=" ...
- Mac上微信小程序官方开发工具卡死的问题
Mac上微信小程序官方开发工具打开后卡死,无法操作,也关不掉,解决方案: 三步: 1.在应用中删除“微信web开发者工具” 2.删除一下几个配置和缓存文件: 1.-/Library/Applicati ...
- 技本功丨收藏!斜杠青年与你共探微信小程序云开发(下篇)
2019年2月26日,人们为了一个杯子疯了一天. 星巴克猫爪杯,一场已经与猫无关了的“圣杯战争“.网上的倒卖价格,已炒至近千元! 求而不得,舍而不能,得而不惜.这是人最大的悲哀... 所以,请珍惜以下 ...
- 微信小程序-云开发(手记)
微信小程序-云开发(手记) 1.创建data.json文件 注意以下几点要求: 入门示例: init方法的env:默认环境配置,传入字符串形式的环境 ID(理解为数据库)可以指定所有服务的默认环境(意 ...
- 微信小程序快速开发
微信小程序快速开发 一.注册小程序账号,下载IDE 1.官网注册https://mp.weixin.qq.com/,并下载IDE. 2.官方文档一向都是最好的学习资料. 注意:1)注册账号之后会有一个 ...
- 第六章 “我要点爆”微信小程序云开发实例之爆文详情页制作
爆文详情页制作 从首页中数据列表打开相应详情页面的方法: 给数据列表中每个数据项加一个点击事件,同时将当前数据项的id暂时记录在本地,然后跳转到详情页面detail goopen: function ...
随机推荐
- C语言--浮点数
在程序中使用浮点数 -- 浮点数的精确性有限 -- 在从c语言中float类型的精确度只到小数点的7位 -- 浮点数只能在一定范围内去相信它 -- 在有精确度高的要求下不要使用浮点数(在算钱的时候,误 ...
- 常用的PHP函数封装,有排序和数据库操作函数
//二分查找 function bin_sch($array, $low, $high, $k) { if ($low <= $high) { $mid = intval(($low + $hi ...
- 同一路由带参刷新,以及params和query两种方式传参的异同
同一路由应该不叫跳转了吧,就先叫刷新好了. 需求及问题 今天做web课设有这样一个需求: 在导航栏中一项叫做教师队伍一级菜单下,有三个二级菜单,分别为教授.副教授.讲师.这三个二级菜单分别对应一个页面 ...
- 单元测试 - tox 使用
1. 问题一 $ tox -e pep8 -- testdemo.server pep8 installed: alembic==,amqp==,appdirs==,Babel==,beautiful ...
- vue项目报错1 Vue is a constructor and should be called with the `new` keyword && jquery.js?eedf:3850 Uncaught TypeError: this._init is not a function...
Vue is a constructor and should be called with the `new` keyword Uncaught TypeError: this._init is n ...
- python变量、对象和引用你真的明白了吗
python变量.对象和引用你真的明白了吗 变量.对象和引用 Python不像C++,Java等语言一样,他们可以不用事先声明变量类型而直接对变量进行赋值.对Python语言来讲,对象的类型和内存都是 ...
- 新手 vim常用命令总结 (转)
转自 https://www.cnblogs.com/yangjig/p/6014198.html 在命令状态下对当前行用== (连按=两次), 或对多行用n==(n是自然数)表示自动缩进从当前行起的 ...
- windows核心编程01_错误处理
windows函数调用出错时,可以通过方法去查询出错根源在哪里. #include <Windows.h> #include <iostream> using namespac ...
- Laravel5如何向闭合函数内传递参数 where function 传参
如上,怎么将$title 像$query一样,在函数内部使用? $result = UserMenus::with(['menu'=>function($query){ $query->w ...
- 【转】rsa公钥和私钥的生成
转:https://www.cnblogs.com/zengsf/p/10136886.html 在liunx环境中 openssl 然后生成私钥: genrsa -out app_private_k ...