[微信小程序项目实践总结]30分钟从陌生到熟悉 前言 我们之前对小程序做了基本学习: 1. 微信小程序开发07-列表页面怎么做 2. 微信小程序开发06-一个业务页面的完成 3. 微信小程序开发05-日历组件的实现 4. 微信小程序开发04-打造自己的UI库 5. 微信小程序开发03-这是一个组件 6. 微信小程序开发02-小程序基本介绍 7. 微信小程序开发01-小程序的执行流程是怎么样的? 阅读本文之前,如果大家想对小程序有更深入的了解,或者一些细节的了解可以先阅读上述文章,本文后面点需要对…
前言 我们之前对小程序做了基本学习: 1. 微信小程序开发07-列表页面怎么做 2. 微信小程序开发06-一个业务页面的完成 3. 微信小程序开发05-日历组件的实现 4. 微信小程序开发04-打造自己的UI库 5. 微信小程序开发03-这是一个组件 6. 微信小程序开发02-小程序基本介绍 7. 微信小程序开发01-小程序的执行流程是怎么样的? 阅读本文之前,如果大家想对小程序有更深入的了解,或者一些细节的了解可以先阅读上述文章,本文后面点需要对着代码调试阅读 对应的github地址是:htt…
叨逼叨 还记得以前小编上大学那会苦于课后习题没有答案...到了考试....就像下面这个图一样- 现在,那些同样在纠结于书本后的答案太遥远的同学们,要告诉你们一个好消息,个人历时两周作业的时间开发的小程序[大学课后答案习题解析助手]上线了,已经提供大学各学科教材课后答案,不用撕书,不用翻来翻去,就可以查看答案了- 少废话,看东西 https://minapp.com/miniapp/9985/ 微信扫一扫,使用大学课后答案习题解析助手(请忽略这么长的名称),感谢杨伯伯提供设计图标. 功能介绍 [大…
背景介绍 因为之前用c#的winform中的gdi+,java图形包做过五子棋,所以做这个逻辑思路也就驾轻就熟,然而最近想温故html5的canvas绘图功能(公司一般不用这些),所以做了个五子棋,当然没参考之前的客户端代码,只用使用之前计算输赢判断算法和电脑AI(网络借取)的算法,当然现在html5做的五子棋百度一下非常多,但是自己实现一边总归是好事情,好了废话不多说了进入正题.^_^ 界面功能介绍与后续可增加功能  目前界面功能: 主界面包含 1:人人.人机对战选项 2:棋子外观选择 3:棋…
一.微信小程序简单介绍: 微信官方介绍微信小程序是一个不需要下载安装就可使用(呵呵,JS代码不用下载吗?展示的UI不用下载吗?)的应用,它实现了应用“触手可及”的梦想,用户扫一扫或搜一下即可打开应用. 我的理解是:微信小程序依托与微信.如果将微信理解为一个计算机编译解释平台,那么微信小程序就是一个个小的应用.通过微信这个平台,微信小程序才能运行起来.这确实比传统的下载APP能节省很多内存空间(因为一些代码已经被微信这个大容器给封装了,你只需要一些简单的代码,就能调用一些系统功能.) 那么,它与H…
目录 项目是否适合移植到小程序上? 概要介绍 实践得到的经验 规则 小程序不支持的 新特性 小窍门 会话管理 进阶 项目是否适合移植到小程序上? 小程序由于微信提供了一些组件,在微信中的一些体验确实不错,对于开发来说,由数据驱动的开发模式也是挺爽的. 概要介绍 其实就是类似于VUE REACT的 MVVM模式,专注于数据和逻辑. 小程序开发框架的目标是通过尽可能简单.高效的方式让开发者可以在微信中开发具有原生 APP 体验的服务. 框架提供了自己的视图层描述语言 WXML 和 WXSS,以及基于…
# News #### 项目介绍微信小程序项目涉及功能 https://gitee.com/richard1015/News https://github.com/richard1015/News 高仿Readhub小程序 1.仿wx.showActionSheet组件, 因为wx.showActionSheet组件不可以调用分享,so自己手动实现 2.canvas文章内容自动换行,内边距功能实现 3.canvas动态生成图片功能 4.canvas 自动适配 5.文章左右滑动查看功能 6.can…
概述 微信小程序项目实战之天气预报 详细 代码下载:http://www.demodashi.com/demo/10634.html 一.准备工作 1.注册微信小程序 2.注册和风天气账号 3.注册百度地图开放平台(小程序应用) 4.在小程序设置中设置request合法域名 二.程序实现 项目代码截图: 具体实现如下: 1.前端页面的实现 <!--index.wxml--> <image src="../../assets/day.jpg" class="b…
概述 微信小程序项目实战之豆瓣天气 详细 代码下载:http://www.demodashi.com/demo/10943.html 一.准备工作 1.注册微信小程序 2.在小程序设置中设置request合法域名 3.将项目导入开发工具即可运行 二.程序实现 1.项目代码截图: 2.主要API: //获取电影信息 getMovie: function () { var that = this var url = "https://api.douban.com/v2/movie/in_theate…
WePY的安装或更新都通过npm进行,全局安装或更新WePY命令行工具,使用以下命令: npm install wepy-cli -g 稍等片刻,成功安装后,即可创建WePY项目. 注意:如果npm安装时间过长或者是连接超时而导致的失败,则可以使用国内的镜像源,这里推荐一个稳定的源,来自淘宝.网站地址为http://npm.taobao.org/,可以使用淘宝定制的cnpm(gzip压缩支持)命令行工具代替默认的npm: $ npm install -g cnpm --registry=http…
Taro本身实现的情况类似于mpvue,mpvue的未来展望中也包含了支付宝小程序,现在的版本中,也可以使用不同的构建命令来构建出百度小程序的支持,如第10章所示,但是现在Taro先于mpvue实现了更多更好的“一端开发,多端编译”开发方式. Taro的编写代码方式和mpvue.WePY框架最大的一个差别就是,Taro并不是基于Vue.js的语法规范,而是遵循React语法规范,它采用与React一致的组件化思想,组件生命周期与React保持一致,同时支持JSX语法,让代码具有更丰富的表现力,使…
使用uni-app(Vue.js)开发微信小程序项目步骤 1. 新建一个uni-app项目   创建完成后的目录结构 2. 打开微信小程序开发工具端的端口调试功能 3. 运行创建的项目 效果…
一.它是谁? [miniprogram-to-uniapp]转换微信小程序"项目为uni-app项目.原则上混淆过的项目,也可以进转换,因为关键字丢失,不一定会完美. 二.它的原理是什么? 最初是学了半节课堆和栈,觉得词法分析挺有意思的,再加入转换小程序插件时,发现这些繁琐的操作完全可以使用程序来完成.核心是使用Babel获取AST(词法分析),然后或使用Babel自带函数增删,或正则分析替换等等操作.可能有的朋友觉得,这种为啥不是纯正则分析? 纯正则可以解决一部分问题,对于标签与标签内容,其实…
微信小程序项目使用npm安装vant-weapp的正确步骤 1.在当前小程序项目目录npm init -y 构建npm项目 2.运行命令 npm install vant-weapp -S --production安装完 发现在当前小程序目录下新增node_modules目录 下面有了vant-weapp组件文件夹 如下图: 3.详情里面:选中使用npm模块 4.进入微信开发工具:选择 工具 -> 构建npm 5.下面以引入button组件到某页面为例子: 在此页面的.json中配置 "u…
这篇文章会很长,非常长,特别长,无敌长. 真的是挤牙膏般的项目进度,差不多是8月底有开始这个项目的想法,时至今日都1个多月了,抛去频繁的加班时间,王者时间,羽毛球时间...见缝插针的写这个项目,我竟然写完了,我竟然没有半途放弃,可真把我自己感动坏了. 好吧,主要是这个小程序很简单,本文会讲解一下这个小程序的代码,所有代码几乎是我一个个敲出来的,所有逻辑也是自己构思梳理的,因此很多实现方式并不是很好,冗余代码很多,代码质量堪忧,但我也在学习中,随着技术提升,会不断来重构代码,如果大家有任何建议欢迎…
帐号相关流程 注册范围 企业 政府 媒体 其他组织 换句话讲就是不让个人开发者注册. :) 填写企业信息 不能使用和之前的公众号账户相同的邮箱,也就是说小程序是和微信公众号一个层级的. 填写公司机构信息,对公账户信息 绑定管理员微信 企业认证 公司对公账户对微信进行打款 账户自动验证后,自动认证通过,并将认证资金退回公司对公账户,费用在1元内随机 小程序发布流程 开发实践 这次的demo项目为农历和公历的转换器,重在体验开发流程. AppID(小程序ID) 做上面的那些步骤就是为了得到小程序ID…
一.注册小程序账号 1.进入微信公众平台(https://mp.weixin.qq.com/),注册小程序账号,根据提示填写对应的信息即可.2.注册成功后进入首页,在 小程序发布流程->小程序开发与管理->配置服务器中,点击"开发者设置".3.会获得一个AppID,记录AppID,后面创建项目时会用到. 二.下载微信web开发者工具 为了帮助开发者简单和高效地开发,微信小程序推出了全新的开发者工具 ,集成了开发调试.代码编辑及程序发布等功能.1.下载页面:https://m…
一.前言 近期,开始了一段辛酸的还未开始就已经结束的"创业"(参见我的第二次创业,以梦为马,莫负韶华).大体上是开发了一款微信小程序,关于创业这件事情就不细说了,本文主要介绍一下开发小程序的过程中踩过的几个坑. 二.注册 开发一款功能全乎的小程序,在未动键盘开始码代码之前就要涉及到账号注册.微信认证.支付申请等等,这里面也有一些坑. 首先是必须要企业认证才能有微信支付功能,以个人名义申请不能进行支付.微信认证还算容易,只需要支付300元即可.支付申请的时候会让你选择需要申请的经营种类,…
1. 项目简介 最近研究小程序云开发,上线了一个有关菜品查询的小程序.包括搜索.分享转发.收藏.查看历史记录等功能.菜谱 API 来自聚合数据.云开发为开发者提供完整的云端支持,弱化后端和运维概念,无需搭建服务器,使用平台提供的 API 进行核心业务开发,即可实现快速上线和迭代,同时这一能力,同开发者已经使用的云服务相互兼容,并不互斥. 目前云开发三大基础能力支持: 云函数:在云端运行的代码,微信私有协议天然鉴权,开发者只需编写自身业务逻辑代码 数据库:一个既可在小程序前端操作,也能在云函数中读…
公司一直说要搞小程序,说了几个月,最近才算落地,一个很小的项目,就结果来讲,勉强让自己窥得小程序门径. 下面总结一下,为了弄好小程序,所学到的知识,以及项目中遇到的问题以及解决的办法.纯属个人见解. 1,微信小程序,是在封装好的js.css.html基础上做开发,在微信端做开发,因而也少了很多兼容性问题: 2,微信小程序的app.js .app.json.app.wxss是全局配置文件,一个小程序只有一个App实例,而每个页面有一个page实例: 3,页面可以通过创建app的实例,也就是getA…
Bmob后端云官网:http://www.bmob.cn/ 微信公众平台官网:https://mp.weixin.qq.com/ 微信小程序官方开发文档:https://mp.weixin.qq.com/debug/wxadoc/dev/ 本文对如何在微信小程序中接入Bmob后端云做一个简单的总结.所谓后端云,一句话概括就是跑在云端的数据库后台+服务器后台,引入到微信小程序开发中能带来的好处就是:让我们可以专注于小程序本身的业务逻辑开发,而不用去管复杂的后台服务器.后台数据库的搭建和维护. 准备…
1.mpvue入门教程, http://mpvue.com/mpvue/quickstart.html # . 先检查下 Node.js 是否安装成功 $ node -v v8.9.0 $ npm -v # . 由于众所周知的原因,可以考虑切换源为 taobao 源 $ npm set registry https://registry.npm.taobao.org/ # . 全局安装 vue-cli # 一般是要 sudo 权限的 $ npm install --global vue-cli@…
一.小程序部分 这是理财系统的前端,江苏海洋大学微信小程序比赛,最后获得了一等奖 GitHub:https://github.com/GeorgeLeoo/finance 1. 项目描述 (1). 此项目为记账小程序 (2). 包括账单.图表.搜索.用户等多个子模块 (3). 使用微信小程序技术 (4). 采用模块化.组件化.工程化等模式开发 2. 项目功能界面 在 1.0.2版本中删除了扇形图 3. 项目目录 * pages:页面 * components:组件 * utils:工具类 |--…
从运营的角度讲制作,不是从程序的角度讲开发,所以简单明晰,通俗易懂,小白也能按照流程完成制作. 微信小程序制作步骤及流程 1.确定好微信小程序的的定位和目的 如行业,功能,内容,目标用户,目标市场,意向名单,专业作用等. 2.落实小程序的程序制作公司,或者团队 若是外部团队,要签订合同,打款之前,到公司实地考察情况.小程序制作的公司很多,并不是每家公司都会制作出你心仪的小程序.这要考察,更要好好沟通. 3.确定好小程序制作文案资料 包括设计需求,功能项目,表格表单,广告语言,模板栏目,按钮,跳转…
前面的文章 介绍了服务端的基础搭建以及用户模块的设计,接下来就是在服务端和客户端实现具体的业务了. 本篇文章先来介绍微信小程序开发的项目结构设计,也就是项目分包情况. 由于项目是在<极客时间-9小时搞定微信小程序开发>的基础上开发,该项目的原有的分包如下: 在此基础上增加了一些目录componends.miniprogram_npm.models,最后的目录如下: componends:存放自定义组件,如自定义弹窗.列表item布局 config:存放配置信息,如接口api.一些常量 imag…
1. 在微信开发者工具(以下简称:开发者)中新建一个模板微信小程序 2. 在开发者中将模拟器分隔开 3. 设置在保存时编译 4. 在vscode中打开项目目录 5. 下载代码提示插件 这样就可以在vscode中编写项目代码,在模拟器中查看内容…
学会一项开发技能最快的步骤就是:准备,开火,瞄准.最慢的就是:准备,瞄准,瞄准,瞄准-- 因为微信小程序比较简单,直接开撸就行,千万别瞄准. 于是乎,趁着今天上午空气质量不错,撸了一个小程序,放在了男性交友网站上了, 我添加了很全的注释,大家赏个star. 地址:https://github.com/yll2wcf/wechat-weapp-lifeTools 功能介绍 功能比较简单,调用了百度ApiStore的接口即时查询空气质量. 我计划多加一些功能,争取把微信小程序提供的功能全用一遍. 也…
最近公司做的项目,我主要负责小程序前端页面也API数据请求页面渲染工作,因为对微信小程序的不熟悉,在做的过程中不免做了很多弯路.现在总结如下: 首先遇到的问题就是"微信小程序尺寸单位"的选择 页面布局到底是用margin:0 auto:还是display:flex;(最后两者都没有选,用了相对定位和绝对定位,还固定了父元素宽高,这简直是作死!) 关于微信小程序tabBar的iconPath设置方法(其实比较简单) 微信小程序里面的text标签,他会保留值的格式(包括换行) 还有就是打电…
一.起步 1.1 配置uni-app开发环境 什么是uni-app,就是基于vue的一个开发框架,可以将我们写的一套代码,同时发布到ios.安卓.小程序等多个平台 官方推荐使用Hbuilderx来写uni-app项目 下载之后可以将预设改为vscode 进入hbuilder插件市场下载scss插件 1.2 初始化uni-app项目 创建一个uni-app项目 如果把小程序项目运行到微信开发者工具: 首先manifest.json配置自己的id 然后工具 设置 运行设置 找到微信开发者工具的安装路…
由于腾讯系QQ.微信等都是基于腾讯自研X5内核,不是google原生webview(其实就是进行了二次定制).实质上也是混合应用的一种,现在很多app产品也开始流行采用X5内核作为其内嵌web浏览服务,所以掌握X5内核混合应用自动化也是app自动化测试工程师必备技能. genymotion.夜神等模拟器是intel的X86架构,很多app安装不了,比如微信.qq等(虽然说可以通过安装arm解释器来解决该问题,但是进行X5内核调试的话也会出现问题),建议最好是一台真实的手机来做. X5内核应用自动…