刚接触到微信小程序开发,这里做一个简单的教程: 1. 获取微信小程序的 AppID 登录 https://mp.weixin.qq.com ,就可以在网站的"设置"-"开发者设置"中,查看到微信小程序的 AppID 了,注意不可直接使用服务号或订阅号的 AppID . 注意:如果要以非管理员微信号在手机上体验该小程序,那么我们还需要操作"绑定开发者".即在"用户身份"-"开发者"模块,绑定上需要体验该小程序…

本系列教程是自己在工作中使用到而记录的,没有顺序之分 如有错误之处,请给与指正,也不希望误导了别人 微信小程序开发教程目录 微信小程序之注册和入门 微信小程序之HTTPS请求 微信小程序开发之选项卡 微信小程序开发之picker 微信小程序开发之图片预览 微信小程序开发之模板 微信小程序开发之模板消息 微信小程序之页面路由 微信小程序开发之scroll-view 微信小程序开发之常见BUG 微信小程序之使用本地接口开发 微信小程序开发之普通链接二维码…

本文介绍了如何在微信小程序开发中使用 npm 中包的功能,大大提高微信小程序的开发效率,同时也是微信小程序系列教程的视频版更新. 微信小程序在发布之初没有对 npm 的支持功能,这也是目前很多前端开发人员在熟悉了 npm 生态环境后,对微信小程序诟病的地方. 微信小程序在 2.2.1 版本后增加了对 npm 包加载的支持,使得小程序支持使用 npm 安装第三方包. 微信小程序的功能更新最近更新的也非常给力,如之前给大家介绍的微信小程序开发平台新功能「云开发」快速上手体验. 1. 在小程序中加载…

代码地址如下:http://www.demodashi.com/demo/14210.html 一.前期准备工作 软件环境:微信开发者工具 官方下载地址:https://mp.weixin.qq.com/debug/wxadoc/dev/devtools/download.html 1.基本需求. 简易计算器 满足日常所用的的加减乘除计算 带历史记录,查看过往计算 2.案例目录结构 二.程序实现具体步骤 1.index.wxml代码 <!--index.wxml--> <view cla…

之前说要和同事一起开发个微信小程序项目,现在也在界面设计,功能定位等需求上开始实施了.所以在还未正式写项目前,打算在空闲时间学习下小程序.本意是在学习过程中结合实践整理出一个较为入门且不是很厚的教程,但也很难保证时间充裕能一直写下去.所以先开个头留个坑,那么本文开始先从小程序注册到创建第一个小程序说起: 一.从注册开始 要开发小程序自然要申请注册一个小程序,我们先进入微信公众平台注册账号(若有账号则直接登录). 因为微信公众号同时管理着订阅号,公众号以及小程序等多种账号,所以这里要选择小程序账号…

9月21日晚发布的微信公众平台·小程序内侧邀请,微信应用号(小程序,「应用号」的新称呼)终于来了!目前还处于内测阶段,微信只邀请了部分企业参与封测.想必大家都关心应用号的最终形态到底是什么样子? 怎样将一个「服务号」改造成为「小程序」?相信很多技术人员开始关注,会不会取代APP开发,一些职位会不会被取代. 现在带你一步步创建完成一个微信小程序,并可以在手机上体验该小程序的实际效果.这个小程序的首页将会显示欢迎语以及当前用户的微信头像,点击头像,可以在新开的页面中查看当前小程序的启动日志.下载源码…

一.注册小程序账号 1.进入微信公众平台(https://mp.weixin.qq.com/),注册小程序账号,根据提示填写对应的信息即可.2.注册成功后进入首页,在 小程序发布流程->小程序开发与管理->配置服务器中,点击"开发者设置".3.会获得一个AppID,记录AppID,后面创建项目时会用到. 二.下载微信web开发者工具 为了帮助开发者简单和高效地开发,微信小程序推出了全新的开发者工具 ,集成了开发调试.代码编辑及程序发布等功能.1.下载页面:https://m…

序言 开始开发应用号之前,先看看官方公布的「小程序」教程吧!(以下内容来自微信官方公布的「小程序」开发指南) 本文档将带你一步步创建完成一个微信小程序,并可以在手机上体验该小程序的实际效果.这个小程序的首页将会显示欢迎语以及当前用户的微信头像,点击头像,可以在新开的页面中查看当前小程序的启动日志. 1. 获取微信小程序的 AppID 首先,我们需要拥有一个帐号,如果你能看到该文档,我们应当已经邀请并为你创建好一个帐号.注意不可直接使用服务号或订阅号的 AppID. 利用提供的帐号,登录https…

第五章:微信小程序名片夹详情页开发 今天加了新干货!除了开发日志本身,还回答了一些朋友的问题. 闲话不多说,先看下「名片盒」详情页的效果图: 备注下大致需求:顶部背后是轮播图,二维码按钮弹出模态框信息.点击微信栏.点击存入手机,地址栏需要地图展示,名片分享也是模态框指引. 首先是轮播图,autoplay 自动播放,interval 轮播的时间,duration 切换速度,可以根据自己需求去添加. Delete:是删除按钮,加载进来是隐藏的,需用户点轮播图进去后,轮播图全屏显示才出来. noCli…

一.注册小程序账号 1.进入微信公众平台(https://mp.weixin.qq.com/),注册小程序账号,根据提示填写对应的信息即可.2.注册成功后进入首页,在 小程序发布流程->小程序开发与管理->配置服务器中,点击“开发者设置”.3.会获得一个AppID,记录AppID,后面创建项目时会用到. 注意:如果要以非管理员微信号在手机上体验该小程序,那么我们还需要操作“绑定开发者”.即在“用户身份”-“开发者”模块,绑定上需要体验该小程序的微信号.本教程默认注册帐号.体验都是使用管理员微信…

关注,QQ群,微信应用号社区 511389428,511389428 微信应用开放的服务和组件包含如下: 视图容器:视图(View).滚动视图.Swiper 基础内容:图标.文本.进度条 表单组件:按钮.表单等等 操作反馈 导航 媒体组建:音频.图片.视频. 地图 画布 文件操作能力 网络:上传下载能力.WebSocket 数据:数据缓存能力 位置:获取位置.查看位置 设备:网络状态.系统信息.重力感应.罗盘 界面:设置导航条.导航.动画.绘图等等 开放接口:登录,包括签名加密,用户信息.微信支…

2016年09月21日晚 微信发不了微信“小程序”的内测版,一时间整个互联网都炸了锅.个大新闻.论坛都在讨论这个事情. 作为互联网的一猿,我们怎能不紧跟时代的脚步.于是第二天上午也对微信发布的“小程序” 进一步的做了相关了解. 很多人问我这是什么? 我一般回答:这是未来. 安装教程 关于使用教程网上已经有非常多的教程了,我在这里也不过多赘述,就简单的介绍一下. 想要快速的学习及开发微信的“小程序”(虽然它还没正式发布)我们首先需要一个“微信web开发着工具”这么一个软件,windows版与Mac…

一.实战 HBuilderX:在微信小程序中运行页面,需要设置->安全 开启微信小程序服务端口,HBuilder工具->设置->配置程序路径 网络请求.模板语法.打开页面.页面传参 列表  api:  https://unidemo.dcloud.net.cn/api/news - 返回数据格式 - id 新闻id 如: 72980 - title 标题 - created_at 创建时间 - author_avatar 图标 详情  地址: https://unidemo.dcloud…

首先请看demo 很简单的静态js就可以实现一款小程序开发. js.json.html.css四个核心文件 序言 开始开发应用号之前,先看看官方公布的「小程序」教程吧!(以下内容来自微信官方公布的「小程序」开发指南) 本文档将带你一步步创建完成一个微信小程序,并可以在手机上体验该小程序的实际效果.这个小程序的首页将会显示欢迎语以及当前用户的微信头像,点击头像,可以在新开的页面中查看当前小程序的启动日志. 获取微信小程序的 AppID 首先,我们需要拥有一个帐号,如果你能看到该文档,我们应当已经邀…

今天是这个系列教程的最后一篇. 上一篇教程介绍了,小程序页面如何使用 JavaScript 脚本.有了脚本以后,就可以调用微信提供的各种能力(即微信 API),从而做出千变万化的页面.本篇就介绍怎么使用 API. 所有示例的完整代码,都可以从 GitHub 的代码仓库下载. 一.WXML 渲染语法 前面说过,小程序的页面结构使用 WXML 语言进行描述. WXML 的全称是微信页面标签语言(Weixin Markup Language),它不仅提供了许多功能标签,还有一套自己的语法,可以设置页面…

微信是中国使用量最大的手机 App 之一,日活跃用户超过3亿,月活跃用户超过11亿(2019年底统计),市场极大. 2017年,微信正式推出了小程序,允许外部开发者在微信内部运行自己的代码,开展业务.这引发了热烈反响,截止2020年6月,小程序数量已经超过了550万个. 小程序已经成为国内前端的一个重要业务,跟 Web 和手机 App 有着同等的重要性.小程序开发者供不应求,市场招聘需求极其旺盛,企业都抢着要. 尽管如此,小程序的教程却很缺,要么是不够系统,要么就是跳跃性太大,很多关键的地方寥寥…

小木学堂专注于企业实战开发和经验传授,所以微信小程序诞生这么大的事怎么能不带着大家一起学习学习呢,所以小木学堂讲师连夜赶工学习并实战开发了微信小应用的第一个程序,并录制了课程现免费分享给大家.这个速度绝对是国内领先哦,来看看尝鲜开发,闲话少说,上地址.                在线免费观看地址 百度云下载:http://pan.baidu.com/s/1jIIzIKI 腾讯视频:http://v.qq.com/x/page/o03315osn5v.html csdn课程地址:http://…

第八章:微信小程序分组开发与左滑功能实现   先来看看今天的整体思路: 进入分组管理页面 --> 点击新建分组新建 进入到未分组页面基本操作 进入到已建分组里面底部菜单栏操作 --> 从名片夹中添加进行操作.   理清完基本流程我们开始开发.首先整个布局可以先看下,我再一步步讲. 静态布号局后,我们开始实现新增分组效果, 当然触发它出现的是 显示窗口 点击取消消失 当里面的输入框内容发生改变时 bindinput 事件,大家别使用 bindchange 事件,这里的 bindchange 事件…

第七章:微信小程序编辑名片页面开发   编辑名片有两条路径,分为新增名片流程与修改名片流程. 用户手填新增名片流程:   首先跳转到我们的新增名片页面 1 需要传递用户的当前 userId,wx.navigateTo 带值跳转.Manual 为 true 设置用户走的是新增路线. 新增名片页面 1 基本布局如下: 取到 userId. 使用微信自带的 input 组件验证也非常好用,如 maxLength 属性,可以限制用户输入长度,如我这的姓名长度是最大 5 位,直接数字 5 即可. 也可以自…

前言 由于微信小程序在开发上不能安装npm依赖,和开发流程上也饱受诟病:Taro 是由京东·凹凸实验室(aotu.io)倾力打造的 多端开发解决方案,它的api基于react,在本篇文章中主要介绍了使用taro搭建微信小程序的一些步骤和一个简单demo的实现. 安装 先全局安装@tarojs/cli $ npm install -g @tarojs/cli $ yarn global add @tarojs/cli 之后我们初始化一个名为myApp的项目: $ taro init myApp 然…

前提:微信小程序自1.6.3基础库版本库开始支持简洁组件,之前的版本因不支持,故在引用组件处默认为空节点.关于微信小程序已有模板为何还需构建组件?一是因为组件可以更方便的自定义并绑定行为,二是在其他页面引用时,无需通过import,只需在该页面json文件下配置usingComponents属性即可.(原本想在app.json文件里配置这个属性,从此一劳永逸,但目前貌似还不支持,至少我尝试的时候还不行-.-) 思路:主要是将table的head和tbody部分的数据抽象出来,使之只需要传值就可直…

前言: 因为客户需要,也为了更好的发展我们公司的产品,所以决定扩展移动端.但是由于公司没有原生安卓开发人员,而且开发安卓成本比较高,所以公司一致决定开发微信小程序,也是由于微信小程序最近的火热. 后台使用.Net平台的WebAPi+SqlSugar,前端自然就是小程序了. 小程序介绍: 微信小程序是一种全新的连接用户与服务的方式,它可以在微信内被便捷地获取和传播,同时具有出色的使用体验. 微信小程序不需要下载安装即可使用的应用,它实现了应用“触手可及”的梦想,用户扫一扫或搜一下即可打开应用. 小…

逻辑层,是事务逻辑处理的地方.对于小程序而言,逻辑层就是.js脚本文件的集合.逻辑层将数据进行处理后发送给视图层,同时接收视图层的事件反馈. 微信小程序开发框架的逻辑层是由JavaScript编写.在JavaScript的基础上,微信团队做了一些适当的修改,以便提高开发小程序的效率.主要修改包括: ♦ 增加app和page方法,进行程序和页面的注册 ♦ 提供丰富的API,如扫一扫.支付等微信特有的能力 ♦ 每个页面有独立的作用域,并提供模块化能力. 逻辑层的实现就是编写各个页面的.js脚本文件.…

全局配置:app.json 微信小程序的全局配置保存在app.json文件中.开发者通过使用app.json来配置页面文件(pages)的路径.窗口(window)表现.设定网络超时时间值(networkTimeout)以及配置多个切换页(tarBar)等. 首先看一个典型的全局配置app.json文件 { "pages": [ "pages/index/index", "pages/logs/logs", "pages/demo/de…

小程序目前被炒得沸沸扬扬,无数媒体和企业借机获取阅读流量. 这再次证明一点,微信想让什么火,真的就能让什么火.这种能力真是全中国再也没有人有了,政府也没有. 但四处传的消息很多是失真的,废话不说,先列出8个多数人都搞错的问题: 小程序是HTML5: 小程序是B/S的: 把M站改改就可以接入到小程序里: 小程序体验不佳: 小程序适合低频长尾应用: 小程序是新的Appstore: 小程序做不起来,需求不高: 小程序会做起来,但会和原生应用长期并存. 以上8个是很多人凭直觉得出的结论,但真正深度调研和…

WXSS是一套样式语言,用于描述WXML的组件样式. 官方文档表示,WXSS的选择器目前支持(“.class”.“#id”.“elemnt”.“element,element”.“::after”.“::before”),而且本地资源无法通过WXSS获取,所以WXSS中的样式都是用的网络图片,或者base64. 好在微信团队提供的WXSS具有CSS大部分特性.同时为了更适合开发微信小程序,微信团队对CSS进行了扩充以及修改. 与CSS相比,WXSS扩展的特性有: ♦ 尺寸单位 ♦ 样式导入 尺寸…

框架的视图层由WXMKL(WeiXin Markup language)与WXSS(WeiXin Style Sheet)编写,由组件进行展示. 对于微信小程序而言,视图层就是所有.wxml文件与.wxss文件的集合. 微信小程序在逻辑层将数据进行处理后发送给视图层展现出来,同时接受视图层的事件反馈. ♦ .wxml文件用于描述页面的结构. ♦ .wxss文件用于描述页面的样式. 视图层以给定的样式展现数据并将时间反馈给逻辑层,而数据展现是以组件来进行的.组件(Component)是视图的基本单…

微信团队为小程序提供的框架命名为MINA应用框架.MINA框架通过封装微信客户端提供的文件系统.网络通信.任务管理.数据安全等基础功能,对上层提供一整套JavaScript API,让开发者能够非常方便地使用微信客户端提供的各种基础功能与能力,快速构建一个应用. 通过框架图我们可以看到两大部分:在页面视图层,wxml是MINA提供的一套类似html标签的语言以及一系列基础组件.开发者使用wxml文件来搭建页面的基础视图结构,使用wxss文件来控制页面的展现样式.AppService应用逻辑层是M…

第二章我们已经创建了一个Hello WXapplet示例小程序.我们从文件目录结构来了解Hello WXapplet项目的构成. 目录结构显示,在小程序项目的根目录下面包含3个app开头的文件(app.js.app.json.app.wxss)以及pages目录与utils目录.其中pages目录存放了2个页面(index和log)的构成文件.每个页面都是一个目录,目录名就是唯一的页面名,其下由以页面名为前缀的2~4个文件组成. 小程序的目录文件结构如上,左侧的3个app文件必须放在小程序根目录…

在安装完“微信Web开发者工具”之后,通过开发者的微信扫码进入后,如图. 点击“添加项目”,填入之前获得的AppID(无AppID可忽略),输入项目名称“Hello WXapplet”,选定本地文件夹作为项目目录. 勾选“在当前目录中创建quick start项目”后,点击“添加项目”按钮,即已成功创建了我们第一个微信小程序项目——Hello WXapplet. 开发者工具操作与使用 开发者工具界面基本分为四大区域:1区“顶部菜单”,2区“导航菜单”,3区“目录文件/模拟运行”,4区“编辑/调试…