微信小程序心得体会

2023-11-10

1、微信小程序诞生的前景:

1、受到手机内存的限制,用户无法下载诸多app
2、用户为了简洁性不愿意下载app
3、微信用户的日益增加

2、微信小程序的特点:

微信小程序的理念是”触手可及,用完即走” ,是一种不需要下载安装即可使用的应用。
一次开发,多终端适配(不用适配ios或android)
途径:通过微信(扫描二维码、搜索、分享)即可获得,和微信共用内存使用,占用内存空间忽略不计

3、微信小程序与h5页面的比较:

1、运行环境不同:
h5运行环境是浏览器(包括webview)
小程序的运行环境是微信开发团队基于浏览器内核完全重构的一个内置解析器(微信端内)
2、获取系统级权限不同:
微信小程序相对于H5能获得更多的系统权限(网络状态、WIFI、蓝牙、屏幕亮度...)
3、运行流畅度:
H5:网页需要在浏览器中渲染。所以加载这一过程,会给人明显的「卡顿」感觉,复杂逻辑h5尤为明显。
微信小程序:代码直接在微信上运行,省去了通过浏览器渲染,因此会比H5流畅很多,
小程序各个页面的切换、跳转等体验已经媲美原生App

4、微信小程序与原生APP的比较:

小程序的劣势:
1、从技术层面来说,小程序的体验不及APP
2、从功能体量上来说,小程序不及APP
3、从开放性来说,小程序不及APP
APP的劣势:
1、开发维护成本高:安卓与IOS独立开发,维护起来相对也比较麻烦;
2、留存率低:APP打开的频率很大程度上决定它的留存率,如果不是经常使用的而可能很快就卸载了;
3、推广成本高:APP在没有一定知名度前提下,推广的成本很高,获客成本高;
4、上传APP路径复杂:上传至APP需要通过store或应用市场的确认。

5、微信小程序开发


开发文档(包括开发工具、教程及官方中文文档):
https://developers.weixin.qq.com/miniprogram/dev/quickstart/basic/getting-started.html

5.1、准备工作

1、申请账号并注册成为微信平台的开发者,并获取AppID(小程序ID)(详细步骤看官网)
2、安装开发工具并登陆:https://developers.weixin.qq.com/miniprogram/dev/devtools/download.html
3、创建小程序项目,并写入小程序ID(AppID)

5.2、项目目录及文件

1、page:是小程序的路由,默认情况下存在两个页面,一个首页,一个日志打印页。
每个页面下可以有4种文件
index.js:配置该页面的变量、函数、生命周期等
index.wxml:类似于html文件,配置当前页面的结构
index.wxss:类似于css文件,配置当前文件的表现
index.json:当前页面的小程序配置(配置小程序窗口背景色,导航栏样式,标题等)
2、utils:工具包,一般是常用的一些封装h哦的函数(时间格式化、数字格式化等)
3、app.js:小程序全局脚本控制( 监听小程序的生命周期,生命小程序的全局变量等)
4、app.json:整个小程序的全局配置,配置有哪些页面构成,配置全局的配置(小程序窗口背景色,默认配置,如果其他页面有配置,则被覆盖)
5、app.wxss:小程序的公共样式
6、project.config.json:项目整体配置文件,包括项目描述、打包忽略文件夹、转义es5、自动压缩等(具体如下图)

{
    "description": "项目配置文件",  //描述
    "packOptions": {  //用以配置打包时对符合指定规则的文件或文件夹进行忽略
        "ignore": []
    },
    "setting": {  //项目设置
        "urlCheck": false,  //不检查安全域名和 TLS 版本
        "es6": true,  //启用 es6 转 es5
        "postcss": true,  //上传代码时样式自动补全
        "minified": true,  //上传代码时自动压缩
        "newFeature": true  //新特征,文档中未描述
    },
    "compileType": "miniprogram",  //编译类型,miniprogram为普通小程序项目
    "libVersion": "2.3.0",  //基础库版本
    "appid": "touristappid",  //AppID
    "projectname": "%E6%B5%85%E8%93%9D%E5%95%86%E5%9F%8EPRO",  //项目名字,只在新建项目时读取,urlDecode解码(路径解码)
    "debugOptions": {
        "hidedInDevtools": []  //配置调试时于调试器 Sources 面板隐藏源代码的hidedInDevtools 的配置规则和 packOptions.ignore 是一致的。
    },
    "scripts": {},  //自定义预处理的命令 beforeCompile编译前预处理命令、beforePreview预览前预处理命令、beforeUpload上传前预处理命令
    "condition": {  //编译模式,增加编译模式时,会添加到下面的对应数组
        "search": {   
            "current": -1,
            "list": []
        },
        "conversation": {
            "current": -1,
            "list": []
        },
        "plugin": {  //插件
            "current": -1,
            "list": []
        },
        "game": {  //小游戏
            "list": []
        },
        "miniprogram": {  //小程序
            "current": -1,
            "list": []
        }
    }
}


app.json:详细见文档https://developers.weixin.qq.com/miniprogram/dev/reference/configuration/app.html

{
  "pages":[//除了整体的配置文件有page选项,其他没有
    "pages/index/index",//第一项必须是小程序的启动页(初始页)
    "pages/logs/logs"//小程序新增和删除页面都需要重新配置
  ],
  "window":{
    "navigationBarBackgroundColor": "#fff",//导航栏(显示时间、电量)的背景颜色
    "navigationBarTextStyle": "black",//导航栏的字体颜色,只支持(white/black)
    "navigationBarTitleText": "WeChat",//导航栏标题文字内容
    "backgroundColor": "pink",
    "backgroundTextStyle": "light",//下拉背景字体,loading样式仅支持(dark/lignt)
    "enablePullDownRefresh": false
  },
  "networkTimepout":{
  },
  "debug":false
}

5.2、项目注册于开发流程

1、注册小程序:小程序的入口是app.js,是用来注册小程序的,执行App方法就可以注册当前开发的小程序,App() 必须在 app.js 中调用,必须调用且只能调用一次。App接受一个对象参数。
参数说明:https://developers.weixin.qq.com/miniprogram/dev/reference/api/App.html

App({//小程序的生命周期
  onLaunch(options) {//小程序初始化完成时触发,全局只触发一次。
    // Do something initial when launch.
  },
  onShow(options) {//小程序启动,或从后台进入前台显示时触发。
    // Do something when show.
  },
  onHide() {//小程序从前台进入后台时触发。
    // Do something when hide.
  },
  onError(msg) {//小程序发生脚本错误或 API 调用报错时触发。
    console.log(msg)
  },
  globalData: 'I am global data'//全局变量或函数
})

2、注册页面(page):每个页面需要先在app.json的page当中注册,然后在相应的js文件启动,执行Page方法。
Page函数接受一个 Object 类型参数,其指定页面的初始数据、生命周期回调、事件处理函数等。
参数说明:https://developers.weixin.qq.com/miniprogram/dev/reference/api/Page.html

Page({
  data: {//挂载在该页面的数据
    text: 'This is page data.'
  },//该页面的生命周期
  onLoad(options) {//页面初始化加载
    // Do some initialize when page load.
  },
  onReady() {//页面初次渲染完成
    // Do something when page ready.
  },
  onShow() {//页面显示
    // Do something when page show.
  },
  onHide() {//页面隐藏
    // Do something when page hide.
  },
  onUnload() {//页面卸载
    // Do something when page close.
  },
  onPullDownRefresh() {//监听用户下拉动作
    // Do something when pull down.
  },
  onReachBottom() {//页面上拉触底事件的处理函数
    // Do something when page reach bottom.
  },
  onShareAppMessage() {//用户点击右上角转发
    // return custom share data when user share.
  },
  onPageScroll() {//页面滚动触发事件的处理函数
    // Do something when page scroll
  },
  onResize() {//页面尺寸改变时触发(横屏竖屏切换)
    // Do something when page resize
  },
  customData: {//任意数据或函数
    hi: 'MINA'
  }
})

6、微信小程序的预览、上传、审核、发布

 

6.1、项目用微信预览

小程序的管理员或开发者可以点击微信开发工具的预览功能进行预览,分为扫描二维码预览和自动预览

6.2、项目的上传、审核、发布

点击右侧上传,填写版本号还上传描述,上传进微信公众平台中。然后在平台选审核,同时添加小程序头像等,最后发布就可以了。

 

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

微信小程序心得体会 的相关文章

  • Python中常见的错误之一是[ImportError: attempted relative import with no known parent pack...

    Python中常见的错误之一是 ImportError attempted relative import with no known parent package 该错误通常在导入相对路径时出现 本文将深入分析该错误的原因 并提供几种解决
  • STM32通过串口控制42步进电机

    上面是我的微信和QQ群 欢迎新朋友的加入 最近在做42步进电机的东西 记录一下问题 目录 1 脉冲输出 2 硬件设计 3 嵌入式软件设计 4 控制软件设计 5 测试使用 1 脉冲输出 主控芯片是STM32F030 主要就是便宜 脉冲输出最开
  • 爬虫入门第4课:定义代理IP的数据模型类

    爬虫学习知识点及案例篇 汇总 爬虫入门第1课 代理池概述及开发环境 爬虫入门第2课 代理池的设计 爬虫入门第3课 实现代理池思路 本阶段带大家从代理池的设计开始 学习Python爬虫及项目实战 详情关注上方专栏 目标 定义代理IP的数据模型

随机推荐

  • 粗略的计算PCD点云的体积和表面积(非精确计算,python代码)

    读取的点云数据进行凸包计算 使用PointCloud对象的compute convex hull方法 返回凸包模型和凸包模型中点的索引 给凸包模型渲染颜色 使用TriangleMesh对象的paint uniform color方法 计算凸
  • 创建jira plugin插件、创建jira实例生成jar包总结

    创建jira plugin插件 创建jira实例生成jar包总结 创建插件骨架 在本地安装完Atlassian SDK后 需注意将环境变量里的maven路径更改为sdk里自带的maven仓库路径 进入Atlassian的bin目录下 在此路
  • unity导入的模型无法编辑材质球属性

    有时候美术做好的模型导入到unity 发现无法编辑材质的shader 如图 选中对应的模型 在inspector面板上更改一个设置 一般就可以了 将location从use embedded materials 改成use external
  • Java原始客户端操作Mongodb 增删改查

    Document方式操作增删改查 1 导入Pom依赖 2 java客户端代码 1 导入Pom依赖
  • 全面理解网络流中的最大流问题

    网络流 最大流问题 前序 在将网络里实现算法之前 我们得聊聊网络流究竟是个什么东西 毕竟只有知道它的样貌 才能继续看懂下面的定义 对吧 首先 网络流不仅仅指的是什么FF算法 dinic算法 算法只是用来解决问题的 稍后我们会更加能体会这一点
  • 移动构造-C++11

    移动构造 移动构造是C 11标准中提供的一种新的构造方法 在现实中有很多这样的例子 我们将钱从一个账号转移到另一个账号 将手机SIM卡转移到另一台手机 将文件从一个位置剪切到另一个位置 移动构造可以减少不必要的复制 带来性能上的提升 有些复
  • 查询每门课程成绩都大于80分学生的姓名

    转载的sql语句 1 查询每门课程成绩都大于80分学生的学号 数据库 表 student name score course A 85 语文 A 75 数学 A 82 英语 B 75 语文 B 89 数学 B 79 英语 天使美眉90 语文
  • Flutter报错之Waiting for another flutter command to release the startup lock解决方案

    问题引入 通过命令行执行 flutter devices 或其他flutter命令时 报错如下 Waiting for another flutter command to release the startup lock 解决方案 关闭A
  • 不用看网课就能学到python的文章(第一天)

    为什么要学python 在大数据时代 抖音快手火爆全球 作业帮小猿搜题的数据库 都离不开大数据 大数据的科学计算 最重要的语言就是python 网络爬虫 网络爬虫 搜狗百科 搜索引擎等等也主要是python 包括一些游戏图像等等都缺少不了p
  • Windows7在Eclipse中配置Python+OpenCV

    1 从http www oracle com technetwork java javase downloads jdk 7u2 download 1377129 html下载jdk 7u2 windows i586 exe 安装到D Pr
  • 简单介绍Roop(类似SimSwap)项目

    文章目录 一 关于Roop 二 安装Roop CPU 2 1 克隆仓库 2 2 设置python国内源 2 2 检查安装virtualenv 2 3 创建项虚拟环境 2 5 安装项目依赖 2 6 下载必要文件 三 运行Roop CPU 四
  • 论文解读《SOLO: Segmenting Objects by Locations》

    实例分割属于比较challenging的任务 他相当于是object detection和semantic segmentation的结合体 在SOLO出现之前 有两种常用的paradigm 1 top down 先进行目标检测 再对检测框
  • mysql中TINYINT的取值范围

    项目场景 最近在开发过程中 看见表设计中是thinyint字段 但对于它的范围产生了好奇 问题描述 当我们填写超过128数值的时候 该字段就会报以下错误 Cause com mysql jdbc MysqlDataTruncation Da
  • 62_Pandas有条件地提取 pandas.DataFrame 的行

    62 Pandas有条件地提取 pandas DataFrame 的行 使用query 方法根据pandas DataFrame的列值的条件提取行 它很方便 因为您可以使用比较运算符和字符串方法以及多个条件的组合来简洁地描述条件规范 目录
  • -bash: /etc/profile: line 11: syntax error near unexpected token `$'{\r''报错问题解决

    在Linux系统配置Java环境变量之后执行 source etc profile指令报 bash etc profile line 11 syntax error near unexpected token r 如下图 错误提示信息已经反
  • dlmalloc解析连载一

    dlmalloc是目前一个十分流行的内存分配器 其由Doug Lea 主页为 http gee cs oswego edu 从1987年开始编写 到目前为止 最新版本为2 8 3 可以从 ftp g oswego edu pub misc
  • 对计算机硬件维护的方法,计算机硬件维护方法

    计算机硬件维护方法 随着科技的不断发展 计算机应用率越来越高 在社会生活的各个领域均有广泛的应用 下面是小编分享的计算机硬件维护方法 一起来看一下吧 计算机常见的硬件故障主要包括内存条损坏 主板元器件损坏 硬盘损坏等 计算机硬件出现故障 一
  • 黑马程序员--分布式搜索ElasticSearch学习笔记

    写在最前 黑马视频地址 https www bilibili com video BV1LQ4y127n4 想获得最佳的阅读体验 请移步至我的个人博客 SpringCloud学习笔记 消息队列MQ学习笔记 Docker学习笔记 分布式搜索E
  • CENTOS环境Apache最新版本httpd-2.4.54编译安装

    一 下载 Apache至少需要apr apr util pcre组件的支持 cd usr local src wget http dlcdn apache org apr apr 1 7 0 tar gz wget http dlcdn a
  • 微信小程序心得体会

    1 微信小程序诞生的前景 1 受到手机内存的限制 用户无法下载诸多app 2 用户为了简洁性不愿意下载app 3 微信用户的日益增加 2 微信小程序的特点 微信小程序的理念是 触手可及 用完即走 是一种不需要下载安装即可使用的应用 一次开发