关闭

个人小程序应用开发指南

时间: 2019-07-22阅读: 762标签: 小程序

小程序依附于各大平台,支付宝、微信、头条、百度等小程序,都是在平台上进行开发,平台提供对应的技术支持和用户环境。对于个人开发者,这个还是蛮方便的,它本身带有流量属性,易于传播。


便捷开发

最近在弄自己的小程序,所以整一篇文章总结一下。如果你已经开发过小程序,这篇文章可以不用看了

小程序开发相当的便捷,配合官方文档,微信小程序文档、支付宝小程序文档,即可在本地运行起来,如果只是单纯的展示,那只需要开发完之后上传,等待审核了。只需要一点前端基础,就可开发一个自己的小程序,有想法的同学可以行动起来。

如果在开发中出现问题,也可以在小程序社区求助,微信小程序社区。

不是在给官方推广。如果你希望开发属于自己的应用,小程序是一个可以快速入手的方案,便捷开发,快速发布,自带传播功能。下面我选中微信小程序讲解。


微信原生小程序开发

微信小程序文档

<!-- 项目目录结构 -->
|—— component               组件目录
|—— pages                   page页面目录
|   ......more dir           
|   |—— index               index页面
|   |  |—— index.js         index.js- js逻辑文件     
|   |  |—— index.json       index.json- json配置文件
|   |  |—— index.wxml       index.wxml- wxml页面结构
|   |  |—— index.wxss       index.wxss- wxss页面样式
|—— app.js                  全局js文件
|—— app.json                全局json配置文件
|—— app.wxss                全局样式文件
|—— project.config.json     项目配置
|—— sitemap.json            爬虫文件

将项目导入到小程序开发工具中,就可以开始开发了。添加页面,直接在pages目录添加新的文件目录。具体细节参考微信小程序文档

语法支持:

  • 目前最新版本库已经 支持Es6 / Es7,async/await 和 Promise;
  • 开发工具会将代码转换成Es5 语法,保证各种机型的样式适配;
  • 部分语法类似于vuereact

组件支持:

  • 提供 template 模板支持, 微信小程序 template模版;
  • Component自定义组件支持,组件内部存在生命周期,
  • Component自定义组件;

API支持:

  • 可以调用封装过的系统原生方法,比如蓝牙、网络信息、扫码等API方法;
  • 常规的方法如:Storage、Reqeuest、Animation、Canvas等,更多可以查看微信小程序 API;
  • 除小程序原生开发外,当然也可以使用框架了,我个人觉得 Taro框架不错,支持多端小程序开发。


Taro开发

Taro开发文档,Taro 支持多端开发,包括微信/百度/支付宝/头条小程序、H5、React-Native,目前我只使用开发过微信小程序和支付宝小程序、H5,其他的还没有尝试过。

|—— config                              开发配置文件
|—— dist                                目标文件目录
|—— src                                 开发目录
|   |—— actions                         redux action文件
|   |—— constants                       常量文件
|   |—— pages                           page页面目录
        ......more dir
|   |   |—— index
|   |   |   |—— index.scss
|   |   |   |—— index.txs
|   |—— reducers                        redux reducers文件
|   |—— store                           redux store文件
|   |—— app.scss                        app全局样式
|   |—— app.tsx                         app全局js
|   |—— index.html                      html文件
|—— .editorconfig                       editor配置文件         
|—— .eslintrc                           eslint配置文件
|—— global.d.ts                         global配置
|—— tsconfig.json                       ts配置文件
|—— package.json
|—— project.config.json
|—— readme.md

语法支持:

  • ts 语法支持;
  • React语法规范;
  • 支持使用 CSS 预编译器;
  • Es6/Es7 语法支持,如果需要更新的语法,可以在配置config配置;

组件支持:

  • react组件式开发,不过最后还是会编译成原生小程序;

npm包:

  • 支持使用 npm/yarn 管理;
  • 可以使用 Redux 进行状态管理;

API:

  • 对小程序API、H5 API进行一次封装,更加方便;

react + ts + npm包,基本就是前端开发正常节奏。不论你开发的那个小程序,只需要运行对应的命令,同时,将dist目录文件导入到开发工具中,即可看见效果。


taro和原生小程序

*原生小程序:上手快,对于接触过前端开发的同学,可以马上上手,基本不存在技术壁垒。面向微信小程序文档编程。

*Taro开发:react语法规范,react组件开发,ts语法支持,支持redux。对于react有偏好的同学,强烈推荐。如果你喜欢react,建议使用Taro开发。(易于团队协作)。

小程序开发问题

  1. 微信小程序 不可以使用cookie
  2. 微信小程序 非HTTPS的域名不被支持
  3. 微信小程序 分享API是同步操作,同时回调成功失败被无法监听
  4. 微信小程序 wx.setStorageSync和wx.getStorageSync的API会频繁报错
  5. 微信小程序 setData数据的1M限制,通过数据数据拆分可以解决
  6. 微信小程序 主包的限制2M,导致无法引入过多的外部文件(使用Taro会依赖npm包)
  7. 微信小程序 微信开发工具占用CPU过高,导致电脑卡顿

当然问题肯定不止这些,还有微信小程序原生组件、API、官方插件等问题,这里不一一细讲了,对于想做自己小程序的同学,这些基本够用。

不过可能会有人问,框架不是还没有讲嘛?其实使用Tora开发小程序,你只是在使用不同的语法,在编写小程序,最后,命令工具都会将文件转换成原生小程序的文件格式。


个人应用

不论你使用哪一种方式,开发你的个人应用,最后都会回归到产品本身上。通过技术完成自己心目中的个人应用,将应用提供给用户,这个才是终极目标。(技术只是手段,产品才是目标)不过我个人使用Taro开发,算是尝尝鲜。

作者:HerryLo
原文永久链接: https://github.com/AttemptWeb


站长推荐

1.云服务推荐: 国内主流云服务商,各类云产品的最新活动,优惠券领取。地址:阿里云腾讯云华为云

2.广告联盟: 整理了目前主流的广告联盟平台,如果你有流量,可以作为参考选择适合你的平台点击进入

链接: http://www.fly63.com/article/detial/4324

关闭

小程序图片加载失败使用默认图片

小程序的image标签有几个常用的属性,lazy-load(懒加载,默认为fasle,不过和本文无关),bindload(当图片加载完成的时候触发的事件),另一个就是我们本文的主角binderror(当发生错误的时候触发的事件);

百度小程序性能优化建议:分包和合理使用setData

智能小程序的视图层使用了 san 框架,相对于其他类似 react 等 mvvm 框架来通过 virtual dom diff 来实现组件的渲染来说,san 框架是基于 data 的 diff 来进行的组件重新渲染,减少了内存的使用率与计算量,保证视图更新的高效性。

微信小程序适配 iPhone 11/Pro

由于目前 iPhone 发售的新机型,iPhone X / iPhone 11 系列,都是刘海屏。因此在小程序设计中,我们经常需要考虑到底部的适配。常规的我们是通过获取系统信息模块来获取的。

微信小程序框架推荐_分享好用的小程序前端开发框架

选择优秀的框架,能帮助我们节省开发时间,提高代码重用性,让开发变得更简单。下面就整理关于微信小程序的前端框架,推荐给大家。

微信小程序与h5的区别

小程序面世以来,尽管微信团队做了很多关于小程序的普及功课,但是还是有很多人不太理解,最多的误解就是把它等同于H5。小程序由于刚推出来时开放的能力十分有限,所以在功能展示上会让普通用户感觉和H5一样,并没有什么特别之处

小程序组件开发_小程序实现自定义组件的多种方式

在小程序中,目前也支持简单的组件化编程,可以把页面通用功能模块抽象成自定义组件,以以便在不同的页面中复用,提供代码可读性,降低维护成本,这篇文章主要讲解小程序实现组件开发的多种方式

小程序框架_推荐多款高质量的小程序框架组件

小程序到底有多火,看看目前推出的开源框架以及组件库就知道了。由于小程序开发的火爆,大家都在致力于探索如何更好的,更加高效的开发小程序,以至于很多公司都贡献了小程序开源框架和组件库。 如: mpvue、Tina.js、Taro、wepy、weweb、touchwx

微信小程序推广方式_最有效的小程序推广模式

当小程序开发完成后,就需要进行推广操作。当然推广的前提是核心功能是否能够满足用户需求,下面总结一些具体的运作方式。和大多数APP的搜索个性一样,用户搜索小程序名称就能进入小程序界面。我们需要做好关键词优化,通过搜索-微信指数

如何微信小程序禁止下拉_解决小程序下拉出现空白的情况

在微信小程序中,用力往下拉动,页面顶部会出现一段空白的地方。 产品的需求不太允许这么做,会影响用户体验,查看文档发现可以使用enablePullDownRefresh这属性来实现,但是在部分ios端仍然可以下拉出现空白。那么该如何解决呢?

Mpx 小程序框架技术揭秘

与目前业内的几个小程序框架相比较而言,mpx 开发设计的出发点就是基于原生的小程序去做功能增强。所以从开发框架的角度来说,是没有任何“包袱”,围绕着原生小程序这个 core 去做不同功能的 patch 工作

点击更多...

内容以共享、参考、研究为目的,不存在任何商业目的。其版权属原作者所有,如有侵权或违规,请与小编联系!情况属实本人将予以删除!