当前位置: 首页 > news >正文

微信小程序经验分享

一. 小程序是什么

来自百度百科:
微信小程序,是一种不需要下载安装即可使用的应用,它实现了应用“触手可及”的梦想,用户扫一扫或搜一下即可打开应用。

来自微信小程序首页:
小程序是一种新的开放能力,开发者可以快速地开发一个小程序。小程序可以在微信内被便捷地获取和传播,同时具有出色的使用体验。

简单来说,就是一个很轻量的App,不需要下载、安装,只需要微信扫一扫或者搜一搜就可以使用。相信大家都已经体验过了。

它的运行原理是怎样的呢?
先看两张开发者模式下的图:

Android

iOS

由图可以看出,顶部的导航栏(NavigationBar)和底部的标签栏(TabBar)是原生组件,在开发中,这两部分是由配置文件进行配置的,并不能够自行编写;

而中间的主要部分则都是WebView,这是开发者可以自行编写的部分。

所以小程序并不完全是基于WebView的Hybrid的HTML5开发,也不是像React Native和Weex一样的js直接调用原生组件,它是两者的混合体。

下图是微信官方的描述:

细节点,小程序


实际测试过程中,发现在低端的Android手机上也会出现卡顿现象。

二. 机遇?挑战?

先上一张图

2.1 小程序的优点:

  1. 轻量,使用方便。
    在国内,只要是智能手机几乎都安装了微信,而小程序只要扫一扫就能使用,无需安装,简单快捷
  2. 自带微信API。
    微信登录、支付、扫码、地图,各种微信相关的API随时调用,不需要集成各种SDK,各种验证
  3. 开发、适配成本低,易维护。
    开发使用微信提供的MINA框架,语法跟Angular/Vue类似,上手简单。Android/iOS适配微信已经帮忙做好了,不需要各种分辨率各种机型手动适配。

2.2 小程序的缺点:

  1. 太轻,压缩后代码不能超过1M。
    如果业务逻辑及其复杂,则用小程序实现较为困难。
  2. API依赖微信
    如果要实现一些特殊的功能,比如Android的红外和NFC,小程序目前还没有办法。

三. 微信小程序开发、发布完整流程

整个流程基于自己的实际体验,更多详细可以查看官方文档

参考文章:
微信小程序接入指南

下图为微信官方接入流程:
接入流程

3.1 注册

注:小程序只对一下用户开放注册企业、政府、媒体、其他组织,如果是个人开发者的话,是没办法注册的

① 在微信公众平台(注意是公众平台不是开放平台)找到小程序注册入口

② 在最下角点击前往注册

③ 首先需要注册一个微信平台账号

④ 登记主体信息

⑤ 登记管理员信息

⑥ 注册成功后登录,提示用管理员账号扫码

⑦ 扫码后登录成功即可进入小程序管理界面

至此注册步骤完成。

3.2 小程序信息完善

因为这已经是填写好的信息了,所以只能给大家简介一下需要填写的信息

需要填写一下几项:
- 小程序名称。必须是没有被注册过的名称,开发版本可以修改三次,发布后不可修改。如果是注册商标名需要提供营业执照商标注册证等信息
- 小程序头像
- 小程序介绍
- 服务类目

填写提交后需审核,审核周期实测为一个工作日。

等待审核的过程中就可以进行开发了。

3.3 开发小程序

① 小程序管理员设置开发者和体验者。管理员在 用户身份 页可以设置管理员、开发者和体验者。
- 管理员也是可以更换的,因为微信小程序的开发中很多时候都需要管理员扫二维码,所以推荐把管理员设置成经常开发的人员
- 开发者最多可以设置10个,设置好开发者后,开发者具有开发、体验、上传代码的权限
- 体验者最多可以设置20个,体验者只有扫码体验的权限

② 下载安装开发者工具

微信开发者工具官方下载地址: https://mp.weixin.qq.com/debug/wxadoc/dev/devtools/download.html?t=201715

支持windows和mac

安装完成后需要扫码,进入后页面是这样

之后导入Demo工程或者自己新建一个工程就可以开发了

注:小程序开发需要AppID,没有AppID微信登录等功能则调不通

AppID可以在管理员中心 首页->小程序信息详情->开发设置里找到,
开发过程中还需要AppSecret(小程序密钥),也可以在这里找到

私密信息,不得不打马赛克

之后进入IDE后,界面是这样的,就可以愉快的写代码了。
关于前端开发方面,后续会专门讲解。先讲一遍整个流程。

3.4 提交审核和发布

① 代码上传
点击IDE的 项目->上传

会提示管理员扫码,管理员扫码后,会让输入版本信息和备注

输入完成后点击上传,上传成功后即可在微信公众平台的小程序管理界面->开发管理 看到上传后的代码

点击提交审核,填写相关信息后即可进入审核阶段,等待审核完成即可发布小程序。

因为小程序正在审核中,所以没办法给大家展示发布后的运营和管理,十分抱歉。
至此,整个流程结束。

四. 微信小程序前端开发,技术分享

参考官方文档地址:https://mp.weixin.qq.com/debug/wxadoc/dev/index.html?t=201718

4.1 微信官方UI库 weui

GitHub地址:https://github.com/weui/weui-wxss/

遇到的坑

  1. 错误提示信息不准确,明明是
    在方法里出现两个相同变量时会报错,如图

    这个方法里形参是id,然后定义了一个局部变量也叫id,在结果就在控制台里报了很奇怪的错误,提示模块没有被定义

相关文章:

  • Array.prototype.slice() 方法
  • String.prototype.slice() 方法
  • span标签挨着写时的出现的迷之间距问题
  • 《Web性能权威指南》笔记:TCP的优化建议
  • MongoDB学习笔记(一) 安装与文件简介
  • MongoDB学习笔记(二) 搭建简单的MongoDB服务器
  • MongoDB学习笔记(三) MongoDB的基本操作
  • 保留一位小数
  • uniapp向另外一个页面传值
  • 小程序实现image标签的图片铺满整个屏幕,高度自适应
  • 百度小程序实现页面返回上一级局部刷新
  • 小程序实现多个按钮点击跳转动态更换样式
  • 小程序实现数据的定时刷新,退出之后数据也不会变成初始值
  • vue模糊的知识点《一》
  • vue模糊知识点《二》
  • [笔记] php常见简单功能及函数
  • CEF与代理
  • CSS 专业技巧
  • CSS3 聊天气泡框以及 inherit、currentColor 关键字
  • es6--symbol
  • If…else
  • js如何打印object对象
  • k8s 面向应用开发者的基础命令
  • Markdown 语法简单说明
  • mysql 5.6 原生Online DDL解析
  • passportjs 源码分析
  • spring security oauth2 password授权模式
  • 编写符合Python风格的对象
  • 来,膜拜下android roadmap,强大的执行力
  • 如何选择开源的机器学习框架?
  • 入门级的git使用指北
  • 3月7日云栖精选夜读 | RSA 2019安全大会:企业资产管理成行业新风向标,云上安全占绝对优势 ...
  • Java性能优化之JVM GC(垃圾回收机制)
  • # .NET Framework中使用命名管道进行进程间通信
  • #LLM入门|Prompt#2.3_对查询任务进行分类|意图分析_Classification
  • #前后端分离# 头条发布系统
  • (JS基础)String 类型
  • (LeetCode 49)Anagrams
  • (poj1.2.1)1970(筛选法模拟)
  • (Redis使用系列) Springboot 实现Redis消息的订阅与分布 四
  • (zz)子曾经曰过:先有司,赦小过,举贤才
  • (附源码)spring boot公选课在线选课系统 毕业设计 142011
  • (附源码)小程序 交通违法举报系统 毕业设计 242045
  • (四)汇编语言——简单程序
  • (原創) 如何讓IE7按第二次Ctrl + Tab時,回到原來的索引標籤? (Web) (IE) (OS) (Windows)...
  • (转) Android中ViewStub组件使用
  • (转)拼包函数及网络封包的异常处理(含代码)
  • ***详解账号泄露:全球约1亿用户已泄露
  • .NET 5种线程安全集合
  • .NET Core 网络数据采集 -- 使用AngleSharp做html解析
  • .Net 代码性能 - (1)
  • .net 桌面开发 运行一阵子就自动关闭_聊城旋转门家用价格大约是多少,全自动旋转门,期待合作...
  • .NET/ASP.NETMVC 大型站点架构设计—迁移Model元数据设置项(自定义元数据提供程序)...
  • .NET/C# 编译期能确定的字符串会在字符串暂存池中不会被 GC 垃圾回收掉
  • .NET4.0并行计算技术基础(1)