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

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

微信小程序开发系列教程 微信小程序开发系列一:微信小程序的申请和开发环境的搭建 微信小程序开发系列二:微信小程序的视图设计 微信小程序开发系列三:微信小程序的调试方法 微信小程序开发系列四:微信小程序之控制器的初始化逻辑 通过前面四个章节的介绍,大家对微信小程序的视图和控制器,以及微信调试器的用法已经有了一个最基本的认识了.在这个基础上,让我们进一步学习微信小程序控制器,掌握在小程序控制器中响应用户输入的方法. 这个例子很简单,在微信小程序的视图index.wxml里,我定义了一个按钮,和一个文…

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

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

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

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

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

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

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

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

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

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

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

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

1.成为微信公众平台开发者 成为微信公众平台的开发者,是小程序开发的首要条件.只有成为微信公众平台的开发者,才可以使用公众平台的各种开发接口.如果你已经是开发者,则可以跳过本章. ①.进入微信公众平台官网(mp.weixin.qq.com)点击右上角的“立即注册”按钮 ②.选择“小程序”. ③.请填写未注册过公众平台.开放平台.企业号.未绑定个人号的邮箱. ④.登录邮箱,查收激活邮件,点击激活链接. ⑤.选择主体类型选择,完善主体信息和管理员信息. ⑥.完成注册后,在微信公众平台官网首页(mp.…

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

线程架构 从前面的章节我们可以知道,.js文件是页面逻辑处理层.我们可以按需在app.js和page.js中添加程序在生命周期的每个阶段相应的事件.如在页面的onLoad时进行数据的下载,onShow的时候进行数据的更新. 典型的app.js代码结构如下: App({ onLaunch: function(){ //启动时执行的初始化工作 }, onShow: function(){ //小程序从后台进入前台时,触发执行的操作 }, onHide: function(){ //小程序从前台进入后…

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

今年 5 月份的时候,微信宣布:「为了更好的针对群场景提供个性化服务,当用户在群聊中点击小程序分享卡片时,小程序支持开发者获取群 ID 和群名称」.但随后没多久,发现小程序只返回了群 ID,并没有给我们群名.现在,终于有方法可以显示群名称啦! 前言 直到现在,网上还可以看到很多「开发者可以获取群名称」这样的新闻.在微信刚宣布的时候确实同时返回了群ID 和 群名称,但随后就只能获取到群 ID 了.估计会有很多开发者跟我一样被文章误导了,还以为是自己代码有问题. 至于微信为什么这么做,官方也作出了解…

承接上篇博客. // index.js Page({ data: { time: (new Date()).toString(), addr: "北京" }, but: function(){ console.log("你好"); this.setData( {}, function(){ wx.navigateTo({ "url": "/qrcode/home/home" }) } ) } }) // index.wxml…

在这篇微信小程序开发教程中,我们将介绍如何使用微信小程序开发企业内部宣传展示等功能. 一.小程序主体部分 一个小程序主体部分由三个文件组成,必须放在项目的根目录,如下: 1. 小程序逻辑 App({ onLaunch: function() { // Do something initial when launch. }, onShow: function() { // Do something when show. }, onHide: function() { // Do something…

目录 项目是否适合移植到小程序上? 概要介绍 实践得到的经验 规则 小程序不支持的 新特性 小窍门 会话管理 进阶 项目是否适合移植到小程序上? 小程序由于微信提供了一些组件,在微信中的一些体验确实不错,对于开发来说,由数据驱动的开发模式也是挺爽的. 概要介绍 其实就是类似于VUE REACT的 MVVM模式,专注于数据和逻辑. 小程序开发框架的目标是通过尽可能简单.高效的方式让开发者可以在微信中开发具有原生 APP 体验的服务. 框架提供了自己的视图层描述语言 WXML 和 WXSS,以及基于…

微信小程序开发系列教程 微信小程序开发系列一:微信小程序的申请和开发环境的搭建 微信小程序开发系列二:微信小程序的视图设计 微信小程序开发系列三:微信小程序的调试方法 微信小程序开发系列四:微信小程序之控制器的初始化逻辑 微信小程序开发系列五:微信小程序中如何响应用户输入事件 通过前面五个章节的介绍,大家对微信小程序的视图和控制器,微信调试器,以及如何在微信控制器里编写JavaScript函数来响应微信小程序的用户事件已经有了一个最基本的认识了.我们现在来开发一些和微信应用相关的知识,进一步巩固…

微信小程序开发系列教程 微信小程序开发系列一:微信小程序的申请和开发环境的搭建 微信小程序开发系列二:微信小程序的视图设计 微信小程序开发系列三:微信小程序的调试方法 微信小程序开发系列四:微信小程序之控制器的初始化逻辑 微信小程序开发系列五:微信小程序中如何响应用户输入事件 微信小程序开发系列六:微信框架API的调用 这个系列教程的前六篇文章我们都在单个的视图上操作.现在让我们创建第二个视图,然后实现从第一个视图到第二个视图的跳转. 首先开发第二个视图: <view class="con…

选项卡是web开发中经常使用到的一个模块,在小程序中竟然没有,这里参考别人的文章自己做了一个双选项卡 实现思路: 通过绑定swichNav事件来控制currentTab(当前选项卡)和isShow(是否显示),达到切换展示电影和游戏的目的 代码: 1.index.wxml <!--index.wxml--> <view class="swiper-tab"> <view " bindtap="swichNav">电影&l…

实现图片的展示和大图预览 使用wx.previewImage(OBJECT)来实现 OBJECT参数说明: 参数 类型 必填 说明 current String 否 当前显示图片的链接,不填则默认为 urls 的第一张 urls StringArray 是 需要预览的图片链接列表 success Function 否 接口调用成功的回调函数 fail Function 否 接口调用失败的回调函数 complete Function 否 接口调用结束的回调函数(调用成功.失败都会执行) 示例代码:…

一.简介 WXML提供模板(template),可以在模板中定义代码片段,然后在不同的地方调用. 定义模板 使用name属性,作为模板的名字.然后在<template/>内定义代码片段,如: <!-- index: int msg: string time: string --> <template name="msgItem"> <view> <text> {{index}}: {{msg}} </text> &…

一.添加模板 登录https://mp.weixin.qq.com获取模板,如果没有合适的模板,可以申请添加新模板,审核通过后可使用,详见模板审核说明 页面的 <form/> 组件,属性report-submit为true时,可以声明为需发模板消息,此时点击按钮提交表单可以获取formId,用于发送模板消息.或者当用户完成支付行为,可以获取prepay_id用于发送模板消息. 表单 <form bindsubmit="formSubmit" report-submit…

本文主要介绍扫普通链接二维码打开小程序, 详情请看官方文档https://mp.weixin.qq.com/debug/wxadoc/introduction/qrcode.html 配置普通链接二维码规则 生成二维码 访问https://cli.im/url,将https://test.com/linkcode?id=1_2生成二维码图片 小程序接收参数 if(option.q){ console.log(option.q); var link = decodeURIComponent(opt…