uniapp之微信小程序开发——目前遇到的坑

文章目录

    • 微信小程序开发教程目录
    • 写在开头
    • 所谓的坑
      • 1. main.js你最好别瞎改
      • 2. uniapp中创建云函数
      • 3. 云函数安装其他npm依赖包
      • 4. 小程序端API和服务端API有何异同
      • 5. 去除button默认样式
      • 6. 组件中使用v-if不能用===
      • 7. websocket使用
    • 总结

微信小程序开发教程目录

正篇
1 【约球online】小程序构建系列教程第一话——技术选型及架构设计
2 【约球online】小程序构建系列教程第二话——合理使用websocket
3 【约球online】小程序构建系列教程第三话——地图点聚合功能实现
番外
微信小程序开发之路——地图调用,你得注意的几个坑
“一人一程”系列——【约球online】小程序技术选型及架构设计
uniapp之微信小程序开发——根据主题色动态修改svg的颜色

写在开头

20190729暑期的开始,也是微信小程序开发之旅的开端。

所谓的坑

1. main.js你最好别瞎改

当我们在HBuilder X中新建一个uniapp项目时,默认的main.js长这样:

import Vue from 'vue'
import App from './App'Vue.config.productionTip = falseApp.mpType = 'app'const app = new Vue({...App
})
app.$mount()

如果你把 …App给删掉,或者改成…app,编译后的微信小程序虽然不会报错,但是App.vue中的onlaunch,onshow这些事件都不会执行了。目前还不知道具体原因,反正这句话别改。

2. uniapp中创建云函数

目前在微信小程序开发平台中创建云函数是十分方便的,但在uniapp中创建云函数似乎并不友好。如果在编译后的微信小程序开发平台中创建云函数,当开发平台关闭后,uniapp重新编译打开,云函数是不会存在的。
为了在本地编辑和调试云函数,这里有一套比较合理的逻辑,如下

步骤一:在uniapp项目下,manifest.json的源码视图中,输入以下代码

"mp-weixin" : {"cloudfunctionRoot" : "static/cloudfunctions/",...
}

作用:指定云函数在本地的文件夹。
步骤二:在static文件夹下新建一个cloudfunctions文件夹
步骤三:在cloudfunctions文件夹下新建一个README.md文件,也可以是其他任意文件。
作用:确保编译成小程序后cloudfunctions文件夹存在。如果该文件夹下没有文件,默认是不会在微信小程序开发平台中显示该文件夹的。
步骤四:在开发者平台中,右键cloudfunctions文件夹,点击“同步云函数列表”,如图1,此时会在该文件夹下新建函数列表文件夹,如图2。
图1在这里插入图片描述图2在这里插入图片描述
步骤五:右键需要编辑的云函数文件夹,点击“下载云函数”,文件夹下就会下载index.js和package.json两个文件,我们就可以在index.js中编辑云函数。
步骤六:编辑完后,记得右键云函数文件夹,点击“上传并部署:云端安装依赖”,将云函数上传到云端,保证下次使用时下载到的云函数是最新的。
需要注意的是,云函数并不会真的下载到static/cloudfunctions文件夹中,而是下载到unpackage/dist/dev/mp-weixin/static/cloudfunctions中,因此你在文件夹中找不到这几个云函数文件,仅仅是在开发者平台中才会显示。

3. 云函数安装其他npm依赖包

  1. 右键云函数文件夹,点击在“终端中打开”,用命令行安装需要的依赖包
  2. 右键云函数文件夹,点击“上传并部署:所有文件”

4. 小程序端API和服务端API有何异同

小程序端的API是在小程序的js中执行,只能操作用户本身的数据,没有权限操作其他用户的数据。
而服务端API是在云函数里执行,拥有最高的权限。
主要差别在于权限高低。另外,小程序读取数据库记录最多20条,服务端API可以读100条,对服务器资源调用的能力也有差别。
因此,建议只涉及自身操作(比如插入一条新记录,更新自己的记录)可以用小程序端API,而涉及遍历数据库、查询等操作,用服务端API。

5. 去除button默认样式

微信小程序给开发者提供了两种分享(转发)小程序的途径,一种是在右上角的按钮中进行分享,一种是在页面中给button添加open-type="share"进行转发。一般情况下,我们会在小程序的设置页面给一个分享的按钮,但我们不想要button的样式,而是希望用view的一些样式,那么如何去除button的默认样式呢?
如果我们直接在button中添加内联样式style="border:none;"会发现一点用都没有。。。
正确写法:

<button class="share" style="background-color:white;border-radius:0;"></button>
<style>.share::after{border:none;}
</style>

这样,我们会发现button的border没有了,背景也改成了白色,然后我们可以把这个button当作其他view一样使用。

6. 组件中使用v-if不能用===

今天发现了一个bug,就是在uni-app中用v-if时,判断相等不能用===,只能用==。

7. websocket使用

我的小程序很特殊的一个功能就是需要实时收发消息,类似QQ、微信这些实时聊天工具,但是功能没有那么齐全就是了。这涉及到了websocket的实现,小程序是自带websocket功能api的,可以连接、关闭以及监听长连接的各项事件。这一部分不讲后端实现,我后端是用node.js引用ws包实现的,当然,你需要把ws转为wss,这也很简单,只需要有一个ssl证书,ws包里有这样的方法。ws转wss方法如下:
在这里插入图片描述
具体详见github ws
微信小程序推荐创建websocket的方式是

var socketTask = uni.connectSocket({
url: 'wss://www.example.com/socket', //仅为示例,并非真实接口地址。
complete: ()=> {}
});

socketTask对象有自己的事件,一个小程序字多可以创建10个socketTask对象,也就是10个长连接。
这里主要想探讨对于一个多页面的小程序,如何让每个页面可以对websocket回传的信息做出相应,如何保持一个小程序只有一个长连接,在哪里写监听事件?
这里简单写一下思路,因为这部分可能会有挺多人想了解(自我感觉,因为困扰了我一段时间),今后会写一个专门的文章,可以关注下。
以下是思路:

  1. 在小程序的App.vue里的onlaunch里创建一个全局socketTask对象,(挂载在vue.property上的全局变量),之后在每个页面里直接用该socketTask对象的readyState判断连接的状态
  2. 创建一个全局函数,用来创建、监听socket,并在需要的地方直接引用,同样挂载在vue.property上
  3. 使用vuex,监听函数里收到消息,对于不同类型的消息,更新vuex的state,在需要的子页面中监听vuex的state。
  4. 注意不同页面的watch不会销毁,所以为了避免重复监听,最后用this.$watch()事件,页面hide的时候unwatch()来取消监听

总结

其实遇到的坑蛮多,有些漏写了,暂时写到这吧。
我知道这种结构的文章很不吃香,因为一般人不会检索出来,所以之后会把重要的部分拆分成单独文章。uniapp编译小程序还在完善,过程中还遇到一些bug,不过报给工作人员貌似都解决了,这里就不赘述。小程序是一种低成本,有很大发展空间的平台,希望小程序的开发人员越来越多,做大做强。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.rhkb.cn/news/38469.html

如若内容造成侵权/违法违规/事实不符,请联系长河编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

Uniapp小程序登录和登录验证

小程序的登录验证流程图&#xff1a; 第一步&#xff1a;获取微信用户的基本信息&#xff1a; 调用getUserProfile方法&#xff0c;获取用户基本信息 methods:{getUserProfile(){desc:"完善用户信息"&#xff0c;success:(res)>{this.saveUserInfo(res.userInfo) …

采用uni-app开发的多端圈子社区论坛系统

采用uni-app开发的多端圈子社区论坛系统 系统基于TP6 Uni-app框架开发&#xff1b;客户移动端采用uni-app开发&#xff0c;管理后台TH6开发。 系统支持微信公众号端、微信小程序端、H5端、PC端多端账号同步&#xff0c;可快速打包生成APP。 拥有完善的后台管理&#xff0c;不…

uniapp之uni-starter小程序多端研发框架搭建与项目实践

随着移动互联网的飞速发展&#xff0c;无数移动APP琳琅满目&#xff1b;在移动App的发展的基础上&#xff0c;衍生了小程序、轻应用技术&#xff0c;它随时可用&#xff0c;但又无需安装卸载。 小程序是一种不需要下载安装即可使用的应用&#xff0c;它实现了应用“触手可及”…

【记录】基于uni-app开发的微信小程序商城项目

一、项目基本结构 &#xff08;一&#xff09;tabbar页面 首页 分类 购物车 我的(用户中心) &#xff08;二&#xff09;非tabbar页面 搜索 商品列表 商品详情 微信支付 结构解析&#xff1a; 1. 构建一个小程序&#xff0c…

【uni-app项目】瑞幸咖啡小程序

技术栈 框架:uni-appui库:uview-ui编辑器:HBuilderXapi文档 api目前只有商品信息,之前完整版api文档不知道被我丢哪里去了,需要的话请订阅后私聊邮箱 功能描述 使用uni-app框架,仿照瑞幸小程序前端,与后端api对接(使用网上的接口),动态处理数据 功能如下 (注意!…

不同平台使用不同技术实现微信好友、朋友圈分享汇总(H5、taro、uni-app)

人生路漫漫&#xff0c;坑&#xff0c;是活久了见。程序猿世界里各种奇葩的需求都有&#xff0c;随之而来的各种坑也是层出不穷。 应前IBM同事邀请特来做分享的专题总结。一般人我不告诉他&#xff0c;刷到的朋友们就赚到了&#xff0c;你懂的~~~~~~收藏吧&#xff01; 事情前…

关于我在uni-app练手中遇到的坑

目录 页面层级结构的加载和回退 filePath编码 对象的深度克隆 弹幕的加载 ​编辑 uni-app内置浏览器加载视频失败 后台报错 java.io.IOException: 你的主机中的软件中止了一个已建立的连接 安卓里遍历uni-list-item错误 手机自带浏览器无法加载视频 乱码问题 video中…

【哈士奇赠书活动 - 17期】-〖uni-app跨平台开发与应用从入门到实践〗

文章目录 ❤️‍&#x1f525; 赠书活动 - 《uni-app跨平台开发与应用从入门到实践》❤️‍&#x1f525; 编辑推荐❤️‍&#x1f525; 抽奖方式与截止时间❤️‍&#x1f525; 赠书活动 → 获奖名单 ❤️‍&#x1f525; 赠书活动 - 《uni-app跨平台开发与应用从入门到实践》…

1个月uni-app微信小程序开发上线实战专栏介绍

一、专栏介绍&#xff1a; 《uni-app开发微信小程序1个月上线实战》&#xff0c;目标带领1000位同学成功开发上线一个自己的个人小程序&#xff01; 作者介绍&#xff1a;国服第二切图仔——资深前端开发工程师&#xff0c;具有六年以上的前端开发经验&#xff0c;曾在多家知…

深入浅析,一步步用GPT打造你的聊天机器人

使用GPT基于你自己的文档构建聊天机器人的分步指南。 微信搜索关注《Python学研大本营》&#xff0c;加入读者群&#xff0c;分享更多精彩 与ChatGPT聊天很有趣&#xff0c;而且信息量很大 —— 与它闲聊可以探索一些新的想法。但这些都是比较随意的用例&#xff0c;新奇感很快…

深入理解Python中的依赖注入

一文带你深入了解Python依赖注入。 微信搜索关注《Python学研大本营》&#xff0c;加入读者群&#xff0c;分享更多精彩 简介 依赖注入是软件工程中使用的一种设计模式&#xff0c;它允许在创建对象时由外部提供其依赖关系&#xff0c;而不是自己创建这些依赖关系。换句话说&a…

独立开发变现周刊(第84期):一个地理位置API服务,月收入1.5万美元

分享独立开发、产品变现相关内容&#xff0c;每周五发布。 (合集&#xff1a;https://ezindie.com/weekly ) 目录 1、tiny.host: 简单部署你的web项目2、Verif Tools: 一个在线虚拟身份信息生成器3、screen.studio: 一个桌面端的录屏编辑工具4、一个地理位置API服务&#xff0c…

李彦宏:十年后不会写提示词或被淘汰;GitHub发布Copilot X,动动嘴就能生成代码;Vite 4.2 发布|极客头条...

「极客头条」—— 技术人员的新闻圈&#xff01; CSDN 的读者朋友们早上好哇&#xff0c;「极客头条」来啦&#xff0c;快来看今天都有哪些值得我们技术人关注的重要新闻吧。 整理 | 梦依丹 出品 | CSDN&#xff08;ID&#xff1a;CSDNnews&#xff09; 一分钟速览新闻点&#…

22个提升生产力的工具推荐,稳了

子曰&#xff1a;工欲善其事&#xff0c;必先利其器。 本文给大家推荐22个提高生产力的工具&#xff0c;总有一款符合你的需求。&#x1f604;&#x1f604;&#x1f604; 提高生产效率工具推荐 滴答清单/Todoist文件检索利器&#xff1a;Everything文件管理软件-Allen Explor…

百度抢先发布中国版ChatGPT——文心一言,现已开通测试申请

3月16日&#xff0c;百度抢先其他国内科技巨头一步&#xff0c;率先发布被誉为中国版ChatGPT的“文心一言”。 即日起&#xff0c;百度也通过“百度智能云”官网正式开发“文心一言”的预约&#xff0c;申请云服务测试。 但是&#xff0c;目前百度智能云只面向企业级客户开放文…

chatgpt赋能python:Python录制屏幕:如何用Python录制屏幕

Python录制屏幕&#xff1a;如何用Python录制屏幕 如果你曾经想过如何在电脑上录制自己的屏幕以制作教学视频或演示产品&#xff0c;那么你需要了解一些关于Python录制屏幕的知识。Python是一门强大的动态编程语言&#xff0c;因其易于学习、连接数据库和编写简洁的代码&#…

chatgpt赋能python:Python中常见的Module报错及解决方法

Python中常见的Module报错及解决方法 在Python编程过程中&#xff0c;经常会使用各种第三方库和模块&#xff0c;以提高代码的效率和可读性。然而&#xff0c;在使用这些模块时&#xff0c;我们有时会遭遇各种各样的错误和异常。本文将介绍Python中常见的Module报错现象及其解…

chatgpt赋能Python-pythonimport报错

Python中Import报错的处理方法 Python是一款非常流行的编程语言&#xff0c;也是众多开发者选择的首选。在代码中&#xff0c;我们通常会使用import语句来引入其他模块&#xff0c;但在实际开发过程中&#xff0c;我们有时会遇到ImportError&#xff1a;No module named XXX等…

chatgpt赋能Python-pythonnumpy报错

Python中Numpy出现报错的解决方法 介绍 Numpy是Python中常用的数学计算库&#xff0c;其支持高效的数组处理和运算&#xff0c;是很多数据科学工程师必备的编程工具之一。由于其强大的功能和灵活性&#xff0c;Numpy在各行各业都有广泛的应用。但有时候在使用Numpy时可能会出…

Open Ai 常见接口参数说明以及常见报错总结

&#x1f4cb; 个人简介 &#x1f496; 作者简介&#xff1a;大家好&#xff0c;我是阿牛&#xff0c;全栈领域优质创作者。&#x1f61c;&#x1f4dd; 个人主页&#xff1a;馆主阿牛&#x1f525;&#x1f389; 支持我&#xff1a;点赞&#x1f44d;收藏⭐️留言&#x1f4d…