微信小程序开发实例详解

“小程序”破解IDE + Demo:https://github.com/gavinkwoe/weapp-ide-crack.git
资源汇总:https://github.com/Aufree/awesome-wechat-weapp
官方简易教程·MINA:http://wxopen.notedown.cn/
Hello小程序 - 非官方:http://www.helloxcx.com
微信应用号开发教程:https://my.oschina.net/wwnick/blog/750055

资源来自网络,拿走不谢!

简单搞了一下,吼吼~:

js:业务处理

//index.js
//获取应用实例
var app = getApp()
Page({
 data: {
  motto: 'Hello World',
  userInfo: {name:'汗青',
        desc:"前端的春天来了!\n 前端要烂大街了!!",
     avatarUrl:"http://img2.3lian.com/2014/gif/10/9/25.jpg"}
 },
 //事件处理函数
 bindViewTap: function() {
  wx.navigateTo({
   url: '../logs/logs'
  })
 },
 onLoad: function () {
  console.log('onLoad')
  var that = this
   //调用应用实例的方法获取全局数据
  app.getUserInfo(function(userInfo){
   //更新数据
   that.setData({
    userInfo:userInfo
   })
   that.update()
  })
 }
})

wxml:创建布局

<!--index.wxml-->
<view class="container">
 <view bindtap="bindViewTap" class="userinfo">
  <image class="userinfo-avatar" src="{{userInfo.avatarUrl}}" background-size="cover"></image>
  <text class="userinfo-name">{{userInfo.name}}</text>
  <text class="userinfo-desc">{{userInfo.desc}}</text>

 </view>
 <view class="usermotto">
  <text class="user-motto">{{motto}}</text>
 </view>
</view>

wxss:设置样式

/**index.wxss**/
.userinfo {
 display: flex;
 flex-direction: column;
 align-items: center;
}

.userinfo-avatar {
 width: 128rpx;
 height: 128rpx;
 margin: 20rpx;
 border-radius: 50%;
}

.userinfo-name {
 color: #aaa;
 font-size: 30rpx;
 margin: 30rpx;
}

.userinfo-desc {
 color: #f00;
 font-size: 50rpx;
 line-height: 70rpx;
}

.usermotto {
 margin-top: 200px;
}

演示截图

小程序组件Demo演示截图

以上就是微信小程序的简单实例,希望能帮助开始学习微信开发的朋友,谢谢大家对本站的支持!

时间: 2016-09-21

微信小程序 开发指南详解

编写代码 创建小程序实例 点击开发者工具左侧导航的"编辑",我们可以看到这个项目,已经初始化并包含了一些简单的代码文件.最关键也是必不可少的,是 app.js.app.json.app.wxss 这三个.其中,.js后缀的是脚本文件,.json后缀的文件是配置文件,.wxss后缀的是样式表文件.微信小程序会读取这些文件,并生成小程序实例. 下面我们简单了解这三个文件的功能,方便修改以及从头开发自己的微信小程序. ​ app.js是小程序的脚本代码.我们可以在这个文件中监听并处理小程序的

微信小程序开发之实现选项卡(窗口顶部TabBar)页面切换

微信小程序开发中选项卡.在Android中选项卡一般用fragment,到了小程序这里瞬间懵逼了. 总算做出来了.分享出来看看. 先看效果: 再上代码: 1.index.wxml <!--index.wxml--> <view class="swiper-tab"> <view class="swiper-tab-list {{currentTab==0 ? 'on' : ''}}" data-current="0"

微信小程序 欢迎界面开发的实例详解

微信小程序 欢迎界面 市面上大多数的app都会有一个欢迎界面,下面将演示如何通过微信小程序实现一个欢迎界面. 下面将会按照以下的顺序介绍: 布局的实现 逻辑的实现 样式的实现 1.布局的实现 整个布局使用swiper滑动视图实现,滑动视图的每一个item通过一个block块包裹,块中包裹的是滑动视图的每一个item, item中包含image图片和button按钮 <swiper indicator-dots="true"> <block wx:for="{

微信小程序应用号开发教程详解

微信应用号(微信公众平台小程序,「应用号」的新称呼)终于来了!开源中国社区的博卡君通宵吐血赶稿写出的微信公众平台应用号开发教程!大家赶紧来学习一下吧 微信公众平台小程序目前还处于内测阶段,微信只邀请了部分企业参与封测.想必大家都关心应用号的最终形态到底是什么样子?怎样将一个「服务号」改造成为「小程序」? 我们暂时以一款简单的第三方工具的实例,来演示一下开发过程吧.(公司的项目保密还不能分享代码和截图.博卡君是边加班边偷偷给大家写教程.感谢「名片盒」团队提供他们的服务号来动这个手术,所以博卡君的教

微信小程序应用号开发体验

昨天微信小程序(应用号)内测的消息把整个技术社区炸开了锅,我也忍不住跟了几波,可惜没有内测资格,听闻破解版出来了,今天早上就着原来的项目资源试开发了一下,总结一下体验. 总体体验 开发效率高,6:40左右破解完IDE,7:20左右点做完了首页和导航栏的布局,微信把觉见的布局都做了封装,比传统的前端开发效率高. 前端可以快速上手:熟练的前端可以很快上手,可能只要一小时读文档的时间加一个官方的例子. 开发工具难用,很多目录的操作和IDE常见的格式化代码,html配对等功能暂不支持. 开发限制了很多前

微信小程序版的知乎日报开发实例

先看看效果图 开发环境准备 小程序 出来第二天就被破解,第三天微信就把开发工具开发下载了, 现在只需要下载 微信开发者工具 就可以使用了, 创建项目的时候,要选择无 appid, 这样就不会有 appid 的验证了. 目录结构 1.app.js 注册app逻辑, app.wxss 全局样式文件 app.json 配置信息 2.pages 存放页面文件 3.utils 工具类代码 4.images 图片资源文件 小程序中每一个页面都会有三个文件 .wxml .wxss .js ,对应着结构.样式.

微信小程序开发探究

前段时间比较流行的微信小程序,因为一直没有所谓内测码也没具体关注.拖到现在正好借组内分享的时机来仔细了解一下微信小程序.了解一个新的事物无外乎从是什么(本质),怎么用(具体用法),为什么用(优缺点)来学习,首先分析一下微信小程序是什么,听起来比较高大上,说实话原来我确实挺疑惑,到底这一套是什么开发机制,native?hybrid?纯h5?看网上各种教程上来就说api说语法,感觉不先理清楚是什么的问题就去搬api过来纯粹是耍流氓. 一.微信小程序是什么:     言归正传,微信小程序的本质是什么?

微信小程序(应用号)开发新闻客户端实例

下载最新版的微信小程序开发工具,目前是v0.9.092300 下载地址:https://mp.weixin.qq.com/debug/wxadoc/dev/devtools/download.html 官方文档:https://mp.weixin.qq.com/debug/wxadoc/dev/index.html git下载地址:http://git.oschina.net/dotton/news 先看下效果图: Paste_Image.png 一.新建应用 1.内测阶段对于无内测号的开发者,

微信小程序 开发工具快捷键整理

微信小程序 微信开发者工具 快捷键,最近学习研究微信小程序,用了不少快捷键,索性记录下来,后续如果有其它的快捷键继续增加, 微信小程序已经跑起来了.快捷键设置找了好久没找到,完全凭感觉.图贴出来.大家看看. 我现在用的是0.10.101100的版本,后续版本更新快捷键也应该不会有什么变化. 现在貌似不能修改.如果有同学找到修改的方法,麻烦告诉我.谢谢. 微信小程序代码编辑快捷键 常用快捷键 格式调整 Ctrl+S:保存文件 Ctrl+[, Ctrl+]:代码行缩进 Ctrl+Shift+[, C

微信小程序开发实战教程之手势解锁

代码:https://github.com/jsongo/wx-gesture-lock 这个手势解锁的demo使用了https://github.com/lvming6816077/H5lock这个项目的算法和主逻辑,整合到微信小程序来,修改了很多地方的语法来适配小程序,去掉了window.document等函数,同时也添加了新的机制来解耦界面的操作和第三方库,这个下面会介绍到. 不过可惜的是,这个demo也只能在开发工具上玩玩,到真机上测试的时候,手指一滑动,页面会跟着滚动,手势没法使用.

微信小程序开发入门基础教程

微信小程序开发入门基础教程 本文档将带你一步步创建完成一个微信小程序,并可以在手机上体验该小程序的实际效果. 开发准备工作获取微信小程序的 AppID 登录 https://mp.weixin.qq.com ,就可以在网站的"设置"-"开发者设置"中,查看到微信小程序的 AppID 了,注意不可直接使用服务号或订阅号的 AppID . 下载开发工具 下载地址:https://mp.weixin.qq.com/debug/wxadoc/dev/devtools/dow

微信小程序开发的四十个技术窍门总结(推荐)

前言 微信"小程序"正式上线一周时间,相关话题持续升温.支付宝开发"小程序"的消息也随即曝出,互联网巨头们摩拳擦掌,不少网友调侃说,这势头感觉要挑战现有的"APP帝国"了.那么,面对如此炙手可热的小程序,WeX5移动开发云也没有闲着,经过全网搜索,为大家筛选出一条小程序开发者的必读文章,内容涵盖小程序开发实战需要注意的40个技术点,供大家参考! Q:为什么脚本内不能使用window等对象 A:页面的脚本逻辑是在JsCore中运行,JsCore是一

微信 小程序开发环境搭建详细介绍

微信小程序可谓是今天最火的一个名词了,一经出现真是轰炸了整个开发人员,当然很多App开发人员有了一个担心,微信小程序的到来会不会给移动端App带来一个寒冬,身为一个Android开发者我是不相信的,即使有,那也是很遥远的未来. 不管微信小程序是否能颠覆当今的开发格局,我们都要以好奇的心态去接收,去学习.不排斥新技术,所以,心动不如行动,赶紧先搭建一个微信小程序开发工具.那么接下来就让我们一起来开始吧. 先放一张Github上demo的动态图 开发工具下载是看到GitHub上的分享.那么你可以直接

微信小程序开发之选项卡(窗口底部TabBar)页面切换

微信小程序开发中窗口底部tab栏切换页面很简单很方便. 代码: 1.app.json //app.json { "pages":[ "pages/index/index", "pages/logs/logs" ], "window":{ "backgroundTextStyle":"light", "navigationBarBackgroundColor": &qu

微信小程序开发图片拖拽实例详解

微信小程序开发图片拖拽实例详解 1.编写页面结构:moveimg.wxml <view class="container"> <view class="cnt"> <image class="image-style" src="../uploads/foods.jpg" style="left:{{ballleft}}px;width:{{screenWidth}}px" bi

Android中微信小程序开发之弹出菜单

先给大家展示下效果图,具体效果图如下所示: 具体代码如下所示: 1.index.js //index.js //获取应用实例 var app = getApp() Page({ data: { isPopping: false,//是否已经弹出 animationPlus: {},//旋转动画 animationcollect: {},//item位移,透明度 animationTranspond: {},//item位移,透明度 animationInput: {},//item位移,透明度

微信小程序开发之好友列表字母列表跳转对应位置

微信小程序开发之好友列表字母列表跳转对应位置 前言: 在小程序里实现微信好友列表点击右侧字母列表跳转对应位置效果.写了个demo,核心部分很简单,所以没多少注释,如果遇到问题就加群问我吧. 核心技术点: 1.小程序scroll-view组件的scroll-into-view, scroll-with-animation. scroll-y属性. 2.小程序的touch事件的应用. 3.Js定时器的应用. view页面代码: index.wxml class="container" sc