从2017年1月微信小程序正式发布算起，到今天差不多过去了一年半。 更有人戏称小程序是互联网的第五大发明。由于微信自身的流量庞大，所以很多开发者看好小程序。...没接触过小程序编程的，都看过来 。这一部分将从零开始开发一款微信小程序，功能很简单，是一个猜拳游戏。...4 介绍一下猜拳游戏布局 单击如下图所示的 index.wxml 文件，输入布局代码，wxml 文件是小程序中的布局文件，用于描述小程序中的 UI。 ?...成功上传小程序后，回到小程序的后台，点击左侧的“开发管理”选项，会看到如下图所示的三个小程序版本的管理页面。...尽管提供的例子非常简单，但足以清楚地展示了小程序开发的完整过程，不过，要想开发牛逼的小程序，还需要有系统的课程，这样学起来一定会更加轻松 。
一、开始 开发小程序的第一步，你需要拥有一个小程序帐号，通过这个帐号你就可以管理你的小程序。 跟随这个教程，开始你的小程序之旅吧！...小程序的 AppID 相当于小程序平台的一个身份证，后续你会在很多地方要用到 AppID （注意这里要区别于服务号或订阅号的 AppID）。 有了小程序帐号之后，我们需要一个工具来开发小程序。...打开小程序开发者工具，用微信扫码登录开发者工具，准备开发你的第一个小程序吧！...四、你的第一个小程序 新建项目选择小程序项目，选择代码存放的硬盘路径，填入刚刚申请到的小程序的 AppID，给你的项目起一个好听的名字，选择“小程序”开发模式、暂不使用云服务、JavaScript语言，...点击顶部菜单编译就可以在微信开发者工具中预览你的第一个小程序。
如果你使用过原生的小程序框架，你一定经历过或思考过怎么解决以下的问题： 怎么存放可全局访问的变量？ 页面跳转的时候，怎么传递参数到下一个页面比较好？...在原生小程序框架里，确实没有提供什么太统一的方式来指导开发者解决这个问题，大家只能各自用着暂时能解决当前问题的方案。...Vuex 是一个专为 Vue 应用程序开发的状态管理模式，它采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化。...运行小程序，可以看到初始进入index页面时是这样的，页面上显示的计数结果是0： ?...Vuex是开发中一件非常得力的工具，希望你能尽快掌握它。更多的用法可以参考官方文档：https://vuex.vuejs.org/zh/
在上一篇文章中，我们介绍了使用mpvue开发小程序所需要的一些开发环境的搭建，并创建了第一个mpvue小程序代码骨架并将其运行起来。在本文中，我们来研究熟悉一下mpvue项目的主要目录和文件结构。...当小程序开发完成后，将要提交审核时，请使用 build来生成发布的代码。...2）project.config.json文件 project.config.json文件是用于管理微信开发者工具的小程序项目的配置文件，其中记录了小程序的appid、代码主目录、以及编译选项等等信息，...在微信开发者工具中导入小程序项目的时候主要是通过该配置文件读取和写入配置信息。...components：在实际开发中，我们可以尽量将界面上可复用的部分，提取成vue组件放入该目录 pages：存放小程序的页面。
在上一章节中，我们将 vue-cli命令行工具生成的代码骨架中的src目录清理了一遍，然后从头开始配置和编写了一个可以运行的小程序页面，算是正真走上了使用mpvue开发小程序的第一步。...组件系统是Vue应用开发中最具价值的特性之一，在前文中其实我们就已经有在使用组件了，比如 App.vue和首页 index.vue就是两个Vue组件。...成功后通过微信开发者工具的模拟器查看，结果界面将会是这样的： ? 点击“点我呀！”按钮，计数器就会累加点击次数并更新界面上的数字；而点击“清零”按钮，则会将统计数字归零。...组件的扩展性 谈到扩展性，有面向对象编程经验的开发者就会想到“继承(extends)”。继承是一种比较有效的扩展机制，不过随着继承的层次变深，代码也会变得难以理解。...小结 本文我们初步学习了一下Vue组件的相关理念和特性，希望大家花点时间去熟悉和掌握这些比较核心的知识点，相信不管在之后使用Vue进行Web应用开发，还是mpvue小程序开发，都会更加得心应手、事半功倍的
【注意事项】由于mpvue也在不断的开发演进，大家在不同时间段使用的时候，可能会遇到和文中的做法不一样的地方。...程序入口 学习过使用小程序原生框架开发的朋友都知道，一个小程序的入口应该包含这三个最重要的部分：1）app.json 2）app.js 3）首页 有了这三个部分，才能成功运行起一个最简单的小程序。...app.json app.json是小程序的全局配置文件，其包含了小程序的页面文件路径配置、窗口的全局样式信息、底部选项卡式菜单栏的配置，以及一些小程序网络超时的配置等等。...，而是全部由Vue开发Web应用的写法来完成：数据绑定、事件处理、scoped局部样式、以及使用HTML标签来构建界面。...这样最大化的保持和网页应用开发一致，减少了前端人员切换到小程序的学习理解成本，也为原先使用Vue开发的网页应用移植到小程序平台提供了降低迁移成本的可能。
数据绑定 微信小程序页面渲染时，框架会将WXML文件同对应的Page的data进行绑定，在页面中我们可以直接使用data的属性，其使用的语法是Mustache语法，也就是使用双大括号将变量或简单的运算规则包裹起来...或者可以加入我的开发交流群：1025263163相互学习，我们会有专业的技术答疑解惑 如果你觉得这篇文章对你有点用的话，麻烦请给我们的开源项目点点star:http://github.crmeb.net
如果你使用过原生的小程序框架，你一定经历过或思考过怎么解决以下的问题： 怎么存放可全局访问的变量？ 页面跳转的时候，怎么传递参数到下一个页面比较好？...在原生小程序框架里，确实没有提供什么太统一的方式来指导开发者解决这个问题，大家只能各自用着暂时能解决当前问题的方案。...Vuex 是一个专为 Vue 应用程序开发的状态管理模式，它采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化。...运行小程序，可以看到初始进入index页面时是这样的，页面上显示的计数结果是0： ?
在实际的小程序开发中，我们应该以组件的思维去设计每个小程序的功能页面，对其进行合理的组件拆分，让每个部分都保持功能简洁、条理清楚、各司其职，这样会让代码变得更易理解和维护，间接的也提升了代码的健壮性，降低出现...因为在小程序原生模板 wxml里就不支持这种函数调用，导致mpvue没有很好的方式转译过去（虽然小程序有 wxs，但是感觉翻译过去mpvue要做的工作会比较复杂）。...对于表单，请直接使用小程序原生的表单组件 一句话，表单组件又多又复杂，框架可能Hold不住。所以在实际开发中，推荐直接使用小程序的表单组件标签来写，而不是使用Web的表单组件标签来写。...但是在mpvue小程序开发中，不能用这种方式，请使用 标签和小程序原生API wx.navigateTo等来做路由功能。...还有就是请求后端数据，我们通常在Web开发中使用 axios等ajax库来实现，但是在小程序开发中也是不能用的，也请使用小程序的原生API wx.request等来进行。
QQ小程序亮点 开放：快速进驻和多场景应用曝光，助力小程序/小游戏进入亿级流量通道 多样：打通即时通讯(QQ)与异步社交(Qzone) ，最大化地进行社交流量传播 赋能：围绕广告、支付等商业化模式提供解决方案...，让开发者更专注于业务 注册QQ小程序开发者平台 在QQ小程序开发者平台首页 https://q.qq.com 点击右上角的「立即注册」按钮。...登录成功后，开发者工具将使用改账号信息进行小程序的开发和调试。 下面是ytkah正在开发的小程序界面 ?...QQ小程序提交发布 ①QQ小程序提交审核 登录QQ小程序开发者平台首页https://q.qq.com并进入开发管理，该页面将展示已上传的代码，管理员可提交审核或是删除代码。...以上是qq小程序开发与发布的小教程，更完善的开发文档请参考官方文档https://q.qq.com/wiki/
背景 需要开发一个小镇游戏，包含建造建筑、升级建筑、建筑生产金币、收金币等功能。整体复杂度不是太高，主要是建筑的循环动画和地图上小车、风车等小元素的动画，所以考虑使用DOM+CSS3动画来实现。...开发问题解决 2.1 层级控制问题 小镇的舞台是用小程序提供的movable-area和movable-view组件来实现可以移动地图的效果。...真机上调试试，拖动几下就出现界面闪烁，然后就小程序就闪退了。...分析原因，通过设置left和top的方式去改变位置会引起频繁的重排，在小程序的环境中频繁的触发重排就会导致小程序的闪退。...结尾 本文只是先分享一些开发小镇游戏过程解决问题的小技巧，还有部分关于金币运动动画等实现以及性能问题优化相关的后续继续补充。
小游戏页面效果： ? ? ? ? 页面布局index.wxml <!...//遮罩，防止恶意连续点击剪刀石头布图片； //tip:开发工具中wx.showToast(loading)会阻止页面所有事件， //但在真机测试中有问题，所以自己加了个阻止事件的遮罩...//移除动画样式 that.setData({ sayWordsAnimation:"" }); },200); }, 3、微信小程序开发工具还处于测试阶段...，所以期间也遇到了几点小问题，现在把踩过的坑简单说明如下 a、图片src值清除时加空格在开发工具上好使，真机上不行，看来只能用透明图填充了或者动态hidden b、wx.showToast({ title...: ‘加载中…’, icon: ‘loading’ }); 在开发工具中弹出后会阻止页面一切操作，在真机上就失效了，还能点击操作元素，解决办法是自己加一个遮罩层 点下在看，小编绩效涨五毛
1 开始 基础的准备工作可以参考官方的入门介绍 申请帐号 安装开发者工具 创建一个模板小程序 2 了解下小程序的文件结构和页面组成 结合刚创建的 DEMO，大致了解下小程序的文件结构和页面组成，详细的内容可以查看...小程序代码构成。...一个小程序主体部分由三个文件组成，必须放在项目的根目录，如下： 文件 | 必需 | 作用 app.js | 是 | 小程序逻辑 app.json | 是 | 小程序公共配置 app.wxss...| 是 | 页面结构 json | 否 | 页面配置 wxss | 否 | 页面样式表 3 小程序的全局配置 详细文档可以查看小程序全局配置。...5 小结 这节搭建了基础的开发环境，熟悉了小程序的框架基础，对开发框架做了初步尝试：先是全局性地配置了窗口表现、页面、底部 tab 栏，接着对具体页面做了配置。
微信小程序开发平台分享，微信小程序开发教程详解？今天珍奶bb给大家简单唠唠微信小程序开发流程是什么？在唠微信小程序制作流程前，我先给大家讲讲当前互联网企业和中小微企业的经营状况。...1.了解自己企业的微信小程序开发的需求虽然微信小程序开发的功能都是大同小异，但是企业自己也要清楚自己的小程序什么功能是刚需，什么功能不是必要的。然后用一个文档或者表格列清楚自己的小程序真正需要什么。...2.确认需求和预算，找合适的第三方微信小程序开发平台确认好微信小程序制作的具体功能和需求后，然后结合自己的微信小程序制作预算去找第三方微信小程序制作公司获取价格。...3.确定微信小程序开发页面的设计方案确认了微信小程序制作的功能以及合作的第三方微信小程序制作平台后，接下来就需要确认微信小程序的页面设计方案了。...上述就是珍奶bb给大家讲解的微信小程序开发详细步骤，该步骤是和第三方微信小程序开发平台合作开发的步骤。非常适合自行开发比较困难的中小微企业。
由于mpvue框架是完全基于Vue框架的（重写了其runtime和compiler），因此在用法上面是高度和Vue一致的（某些功能由于受限于小程序环境本身的原因而不能使用），这给使用过Vue开发Web应用的前端开发者提供了极低的切换门槛来开发小程序...创建第一个基于mpvue的小程序项目代码 花了点时间装好了必要的开发环境，下面我们就来创建我们的第一个mpvue小程序项目。...因为mpvue使用的是Vue + HTML Web的开发方式开发小程序，它最终还是需要被转换成小程序的代码才可以在小程序环境运行，所以这里的自动编译的目的就是要把Web代码编译成小程序代码。...运行并查看结果 上面的步骤中，我们开启开发模式后，其实并不能看到小程序的执行效果，要真正看小程序的运行界面的话，我们还是要借助微信开发者工具。 打开微信开发者工具，选择新增项目： ?...点击“确定”按钮，进入小程序开发主界面，在左边的小程序模拟器中就能看到firstapp小程序的执行结果了： ?
在上一篇文章中，我们介绍了使用mpvue开发小程序所需要的一些开发环境的搭建，并创建了第一个mpvue小程序代码骨架并将其运行起来。在本文中，我们来研究熟悉一下mpvue项目的主要目录和文件结构。...当小程序开发完成后，将要提交审核时，请使用build来生成发布的代码。...2）project.config.json文件 project.config.json文件是用于管理微信开发者工具的小程序项目的配置文件，其中记录了小程序的appid、代码主目录、以及编译选项等等信息，...在微信开发者工具中导入小程序项目的时候主要是通过该配置文件读取和写入配置信息。...components：在实际开发中，我们可以尽量将界面上可复用的部分，提取成vue组件放入该目录 pages：存放小程序的页面。
程序入口 学习过使用小程序原生框架开发的朋友都知道，一个小程序的入口应该包含这三个最重要的部分： 1）app.json 2）app.js 3）首页 有了这三个部分，才能成功运行起一个最简单的小程序...app.json app.json是小程序的全局配置文件，其包含了小程序的页面文件路径配置、窗口的全局样式信息、底部选项卡式菜单栏的配置，以及一些小程序网络超时的配置等等。...这个值是为了与后面要讲的小程序页面组件所区分开来，因为小程序页面组件和这个App.vue组件的写法和引入方式是一致的，为了区分两者，需要设置mpType值。...，而是全部由Vue开发Web应用的写法来完成：数据绑定、事件处理、scoped局部样式、以及使用HTML标签来构建界面。...这样最大化的保持和网页应用开发一致，减少了前端人员切换到小程序的学习理解成本，也为原先使用Vue开发的网页应用移植到小程序平台提供了降低迁移成本的可能。
在上一章节中，我们将vue-cli命令行工具生成的代码骨架中的src目录清理了一遍，然后从头开始配置和编写了一个可以运行的小程序页面，算是正真走上了使用mpvue开发小程序的第一步。...组件系统是Vue应用开发中最具价值的特性之一，在前文中其实我们就已经有在使用组件了，比如App.vue和首页index.vue就是两个Vue组件。...成功后通过微信开发者工具的模拟器查看，结果界面将会是这样的： ? 点击“点我呀！”按钮，计数器就会累加点击次数并更新界面上的数字；而点击“清零”按钮，则会将统计数字归零。...组件的扩展性 谈到扩展性，有面向对象编程经验的开发者就会想到“继承(extends)”。继承是一种比较有效的扩展机制，不过随着继承的层次变深，代码也会变得难以理解。...小结 本文我们初步学习了一下Vue组件的相关理念和特性，希望大家花点时间去熟悉和掌握这些比较核心的知识点，相信不管在之后使用Vue进行Web应用开发，还是mpvue小程序开发，都会更加得心应手、事半功倍的
在实际的小程序开发中，我们应该以组件的思维去设计每个小程序的功能页面，对其进行合理的组件拆分，让每个部分都保持功能简洁、条理清楚、各司其职，这样会让代码变得更易理解和维护，间接的也提升了代码的健壮性，降低出现...因为在小程序原生模板wxml里就不支持这种函数调用，导致mpvue没有很好的方式转译过去（虽然小程序有wxs，但是感觉翻译过去mpvue要做的工作会比较复杂）。...对于表单，请直接使用小程序原生的表单组件 一句话，表单组件又多又复杂，框架可能Hold不住。所以在实际开发中，推荐直接使用小程序的表单组件标签来写，而不是使用Web的表单组件标签来写。...但是在mpvue小程序开发中，不能用这种方式，请使用标签和小程序原生API wx.navigateTo等来做路由功能。...还有就是请求后端数据，我们通常在Web开发中使用axios等ajax库来实现，但是在小程序开发中也是不能用的，也请使用小程序的原生API wx.request等来进行。 加油！你快成大神啦！阅读下一篇
如果你使用过原生的小程序框架，你一定经历过或思考过怎么解决以下的问题： 怎么存放可全局访问的变量？ 页面跳转的时候，怎么传递参数到下一个页面比较好？...在原生小程序框架里，确实没有提供什么太统一的方式来指导开发者解决这个问题，大家只能各自用着暂时能解决当前问题的方案。...Vuex 是一个专为 Vue 应用程序开发的状态管理模式，它采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化。...运行小程序，可以看到初始进入index页面时是这样的，页面上显示的计数结果是0： ?...Vuex是开发中一件非常得力的工具，希望你能尽快掌握它。更多的用法可以参考官方文档。
领取专属 10元无门槛券
手把手带您无忧上云
云服务器
ICP备案
实时音视频
对象存储
即时通信 IM
