微信小程序开发入门

前端之家收集整理的这篇文章主要介绍了微信小程序开发入门前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

微信小程序开发入门

1

当你准备开发一个微信小程序的时候,你首先需要一个小程序的 APPId ,在微信公众号官网可以获得。(暂时只有官方邀请的才可以获得)。

2

你还需要准备微信开发者工具,官网同样有下载,下载安装即可,支持windows,linux,和MAC平台。

小程序使用的微信自己开发 MINA 框架,提供了视图层描述语言,WXML 和 WXSS 以及基于JavaScript的逻辑层框架,并在视图层与逻辑层间提供了数据传输和事件系统,可以让开发者可以方便的聚焦于数据与逻辑上。


3//app.js App({   onLaunch: function() {     //调用API从本地缓存中获取数据     var logs = wx.getStorageSync('logs') || []     logs.unshift(Date.now())     wx.setStorageSync('logs', logs)   },  getUserInfo: function(cb) {     var that = this     if (this.globalData.userInfo) {       typeof cb == "function" && cb(this.globalData.userInfo)     } else {       //调用登录接口       wx.getUserInfo({         withCredentials: false,        success: function(res) {           that.globalData.userInfo = res.userInfo           typeof cb == "function" && cb(that.globalData.userInfo)         }       })     }   },  globalData: {     userInfo: null   } })

4

上述代码中的一些 API 介绍:

App : 注册一个小程序

onLunch :程序加载时执行的方法

getStorageSync:以同步的方式获取本地缓存

setStorageSync:设置缓存

wx.getUserInfo: 获取用户信息

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

  • 小程序的公共样式表。

  • .log-list {
      display: flex;
      flex-direction: column;
      padding: 40rpx;
    }
    .log-item {
      margin: 10rpx;
    }
  • 7

  • 全局文件就这些,然后我们看 index  文件中的内容有三部分内容,index.js,index.wxml,index.wxss,下面介绍它们的作用。index.wxml 文件这是一个展示页面,作用于html相同。可以看出,内容分块均采用 view 标签,这也很容易让人想到Android 中的布局,但其实只是更多的是 div 标签的另一个版本,在这里面有很多 MINA 自定义的属性,而且在我们在其中也看到了{{ }}样式的值操作,这也很容易让人联想到 angularJS 中的数据双向绑定,在 MINA 中也是支持的。

  • 
              
              

    猜你在找的微信小程序相关文章