浅谈微信小程序

首页 > 代码库 > 浅谈微信小程序

2024-08-15 08:03:58 212人阅读

在如火如荼的互联网技术发展中，各种各样的框架出现，当下最受关注的应该就是微信小程序了。从新闻论坛乃至qq群、微信群，很多很多从事IT工作的朋友喜欢讨论研究这个小程序。带着好奇心，我也参与其中。

第一步，从官网下载微信开发者工具，它分为windows64，windows32和mac，选择相应的去下载。下载之后就安装，步骤省略。

链接：https://mp.weixin.qq.com/debug/wxadoc/dev/devtools/download.html?t=1475052055652

第二步，就是下载demo了。

链接：https://mp.weixin.qq.com/debug/wxadoc/dev/devtools/download.html?t=1475052055652

第三步，打开微信开发者工具，导入解压好的demo，这样就可以愉快地体验小程序了。

在这个过程中，我们可以知道，原来小程序里的其实和很多框架挺像的。它的页面也不再是html了，而是像angular模式。样式后缀也不是css而是wxss；单位不再是px，而是rpx。

数据的绑定这一点和angular相似。

调试界面如下：

技术分享

页面代码：

<view class="container">  <view  bindtap="bindViewTap" class="userinfo">    <image class="userinfo-avatar" src="http://www.mamicode.com/{{userInfo.avatarUrl}}" background-size="cover"></image>    <text class="userinfo-nickname">{{userInfo.nickName}}</text>  </view>  <view class="usermotto">    <text class="user-motto">{{motto}}</text>  </view></view>

样式：

/**index.wxss**/.userinfo {  display: flex;  flex-direction: column;  align-items: center;}.userinfo-avatar {  width: 128rpx;  height: 128rpx;  margin: 20rpx;  border-radius: 50%;}.userinfo-nickname {  color: #aaa;}.usermotto {  margin-top: 200px;}

js:

//index.js//获取应用实例var app = getApp()Page({  data: {    motto: ‘Hello World‘,    userInfo: {}  },  //事件处理函数  bindViewTap: function() {    wx.navigateTo({      url: ‘../logs/logs‘    })  },  onl oad: function () {    console.log(‘onLoad‘)    var that = this  	//调用应用实例的方法获取全局数据    app.getUserInfo(function(userInfo){      //更新数据      that.setData({        userInfo:userInfo      })    })  }})

技术分享