mpvue体验微信小程序开发

微信小程序

https://developers.weixin.qq.com/miniprogram/introduction/index.html?t=18082114

微信小程序是一种全新的连接用户与服务的方式,它可以在微信内被便捷地获取和传播,同时具有出色的使用体验。

概览

为了帮助开发者简单和高效地开发和调试微信小程序,我们在原有的公众号网页调试工具的基础上,推出了全新的 微信开发者工具,集成了公众号网页调试和小程序调试两种开发模式。

  • 使用公众号网页调试,开发者可以调试微信网页授权和微信JS-SDK 详情
  • 使用小程序调试,开发者可以完成小程序的 API 和页面的开发调试、代码查看和编辑、小程序预览和发布等功能。

为了更好的开发体验,我们从视觉、交互、性能等方面对开发者工具进行升级,推出了 1.0.0 版本。

开发者工具下载

https://developers.weixin.qq.com/miniprogram/dev/devtools/download.html

代码构成

在上一章中,我们通过开发者工具快速创建了一个 QuickStart 项目。你可以留意到这个项目里边生成了不同类型的文件:

  1. .json 后缀的 JSON 配置文件
  2. .wxml 后缀的 WXML 模板文件
  3. .wxss 后缀的 WXSS 样式文件
  4. .js 后缀的 JS 脚本逻辑文件

接下来我们分别看看这4种文件的作用。

小程序配置 app.json

app.json 是当前小程序的全局配置,包括了小程序的所有页面路径、界面表现、网络超时时间、底部 tab 等。QuickStart 项目里边的 app.json 配置内容如下:

{
  "pages":[
    "pages/index/index",
    "pages/logs/logs"
  ],
  "window":{
    "backgroundTextStyle":"light",
    "navigationBarBackgroundColor": "#fff",
    "navigationBarTitleText": "WeChat",
    "navigationBarTextStyle":"black"
  }
}

WXML 模板

从事过网页编程的人知道,网页编程采用的是 HTML + CSS + JS 这样的组合,其中 HTML 是用来描述当前这个页面的结构,CSS 用来描述页面的样子,JS 通常是用来处理这个页面和用户的交互。

同样道理,在小程序中也有同样的角色,其中 WXML 充当的就是类似 HTML 的角色。打开 pages/index/index.wxml,你会看到以下的内容:

<view class="container">
  <view class="userinfo">
    <button wx:if="{{!hasUserInfo && canIUse}}"> 获取头像昵称 </button>
    <block wx:else>
      <image src="{{userInfo.avatarUrl}}" background-size="cover"></image>
      <text class="userinfo-nickname">{{userInfo.nickName}}</text>
    </block>
  </view>
  <view class="usermotto">
    <text class="user-motto">{{motto}}</text>
  </view>
</view>

WXSS 样式

WXSS 具有 CSS 大部分的特性,小程序在 WXSS 也做了一些扩充和修改。

JS 交互逻辑

一个服务仅仅只有界面展示是不够的,还需要和用户做交互:响应用户的点击、获取用户的位置等等。在小程序里边,我们就通过编写 JS 脚本文件来处理用户的操作。

<view>{{ msg }}</view>
<button bindtap="clickMe">点击我</button>

点击 button 按钮的时候,我们希望把界面上 msg 显示成 "Hello World",于是我们在 button 上声明一个属性: bindtap ,在 JS 文件里边声明了 clickMe 方法来响应这次点击操作:

Page({
  clickMe: function() {
    this.setData({ msg: "Hello World" })
  }
})

mpvue

http://mpvue.com/

微信小程序的结构可以看出, 真正入手还是有一定难度, 对于广大前端来说 html css js更加熟悉, 对于wxml wxss 以及js都需要再学习。

下面是vue生态的桥接者,链接web和微信小程序。

介绍

mpvuegithub 地址请参见)是一个使用 Vue.js 开发小程序的前端框架。框架基于 Vue.js 核心,mpvue 修改了 Vue.jsruntimecompiler 实现,使其可以运行在小程序环境中,从而为小程序开发引入了整套 Vue.js 开发体验。

实践案例

美团酒旅、餐饮、到店、金融等业务接入。

名称由来

  • mp:mini program 的缩写
  • mpvue:Vue.js in mini program

主要特性

使用 mpvue 开发小程序,你将在小程序技术体系的基础上获取到这样一些能力:

  • 彻底的组件化开发能力:提高代码复用性
  • 完整的 Vue.js 开发体验
  • 方便的 Vuex 数据管理方案:方便构建复杂应用
  • 快捷的 webpack 构建机制:自定义构建策略、开发阶段 hotReload
  • 支持使用 npm 外部依赖
  • 使用 Vue.js 命令行工具 vue-cli 快速初始化项目
  • H5 代码转换编译成小程序目标代码的能力

体验

http://mpvue.com/mpvue/quickstart/

按照快速上手指南,很容易运行 mpvue的mpvue/mpvue-quickstart模板。

# 4. 创建一个基于 mpvue-quickstart 模板的新项目
# 新手一路回车选择默认就可以了
$ vue init mpvue/mpvue-quickstart my-project

# 5. 安装依赖,走你
$ cd my-project
$ npm install
$ npm run dev

源码:

https://github.com/fanqingsong/code-snippet/tree/master/mpvue/my-project

在微信开发者工具上查看

查看dist目录中目标文件,是一个完整的小程序的文件和目录:

原文地址:https://www.cnblogs.com/lightsong/p/9515159.html

时间: 2024-11-05 16:24:59

mpvue体验微信小程序开发的相关文章

微信小程序开发平台新功能「云开发」快速上手体验

微信小程序开发平台刚刚开放了一个全新的功能:云开发. 简单地说就是将开发人员搭建微信小程序后端的成本再次降低,此文刚好在此产品公测时,来快速上手看看都有哪些方便开发者的功能更新. 微信小程序一直保持一个比较稳定的节奏进行功能的开放与更新,不激进但是又不怠慢,就一直像微信产品的节奏一样,而在生活中我们使用微信小程序的频率也慢慢高起来,如 KFC 自助点个餐.下单一些较冷门的商品等等. 而我给大家免费更新的「微信小程序开发视频教程」大纲也一直在修正与增加,从 40 集增加到 60 集,在云开发发布后

微信小程序开发心得

微信小程序也已出来有一段时间了,最近写了几款微信小程序项目,今天来说说感受. 首先开发一款微信小程序,最主要的就是针对于公司来运营的,因为,在申请appid(微信小程序ID号)时候,需要填写相关的公司认证信息如,营业执照等 再次就是用一个未曾开通过公众号的QQ号或微信号来注册一个微信小程序号. 最后,下载微信小程序开发工具. 由于这里,我们更多的关注如何去开发一些app,而不是科谱微信小程序,故在此不在过多的解释,详细的说明,可以去官网帮助文档. 首先,我们拿自己的项目在一步一步的说明并开发吧,

微信小程序开发类型有哪些?

广州微信小程序开发公司(www.dthulian.com)品向科技表示,随着现在的互联网最热门话题,应该是微信小程序开发.那么我们就和大家来探讨下微信小程序开发类型有哪些? 首先微信小程序是什么? 微信小程序是由微信之父张小龙提出的一个概念,小程序是一种不需要下载安装就可以使用的应用,它实现了触手可及的梦想,用户只需扫一扫或者搜一下就可以打开应用.也体现了用完即走的理念,用户不用关心是否安装太多应用的问题,应用将无处不在,应用将随时可用,但又无需考虑安装及卸载. 对用户来讲,小程序可以实现"用完

微信小程序开发入门教程

做任何程序开发要首先找到其官方文档,微信小程序目前还在邀请内测阶段,目前官方放出了部分开发文档,经过笔者一天的查看和尝试,感觉文档并不全面,但是通过这些文档已经能够看出其大概面貌了.闲话不多说,我们先来看看其有哪些官方文档. 微信公众平台开发者文档统一入口为:https://mp.weixin.qq.com/wiki,这里面大部分内容都是以前就有的,微信开发都是基于此份文档. 现在的变化是在这份文档的顶部加了一个“微信公众平台.小程序”的入口,这个入口才就是专门针对微信小程序开发的文档,如下图:

微信小程序_微信小程序开发,小程序源码、案例、教程

原文地址:http://whosmall.com/?post=448 本文标签: 微信小程序 小程序源码案例 小程序项目 小程序源码 微信小程序教程 什么是微信小程序? 微信小程序是微信基于微信平台的一个应用发布平台,微信小程序app开发属于原生app组件提供js接口的开发方式,比混合是app的用户体验更好,仅次于原生应用. 不过微信小程序定位于小,要符合轻量易用无需下载,所以从体积上也是有限制,整个小程序应用体积不能超过1M. 微信小程序的应用场景? 微信小程序的应用场景适用于轻量应用,非强交

一号旺铺:国内第一个专注于微信小程序开发的后端云产品

启航 一号旺铺是天玑旗下继一号旺铺(wangpu1.com,媒体和小程序商店)后又一个基于微信生态的核心产品. 6 月 13 日,「一号旺铺」上线公测了. 「一号旺铺」www.wangpu1.com,是国内第一个专注于微信小程序开发的 BaaS(Backend as a Service)产品,它可以让开发者更快.更轻松地做出优美.稳定的小程序,且不失灵活性.爱范儿技术团队为此努力了 100 天,夜以继日,没有鸡腿. 爱范儿 CTO 在朋友圈写道:一号旺铺本是为了解决内部需求而设计的 BaaS 平

微信小程序开发教程,大多数人都搞错的八个问题

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

微信小程序开发工具测评

1月9日微信小程序正式上线.很多企业都希望能在这个.但是在技术开发的问题上,却不知道该如何下手.经过一些程序员不辞辛苦连夜测试,终于从十余款工具呕心沥血筛选出四款比较靠谱实用的微信小程序开发工具.接下来一起来看看测评吧. 一.微信小程序官方开发工具 注意,它只是个工具,而不是一个IDE.官方工具中的代码编辑功能,就是将vscode的代码编辑功能嵌入到工具中,不足以支撑开发. 优点 因为是官方工具所以有这其它第三方工具有这不可比拟的天然优势,如果不是他代码编辑功能太弱的话. 官方工具,可调试,可预

微信小程序开发工具使用与设计规范(二)

上一篇文章主要分析了微信小程序应用场景和优劣势.本篇你可以学习到: 如何使用小程序开发工具写一个Hello World 微信小程序设计规范 微信小程序项目结构 >>>微信小程序开发工具使用 下载安装小程序 下载 :微信web开发者工具 下载:官方DEMO源码 本系列教程使用的是mac版的开发者工具. 安装完成后,打开微信web开发者工具 1.扫码登录,绑定个人微信 2.扫码登录后,新建或导入已有项目(这里使用官方提供的DEMO源码quickstart) 3.新建项目,导入刚下载的quic