微信小程序开发入门

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: 获取用户信息

{
  "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 中也是支持的。


            

            
              
                相关文章
              
                [小程序]微信小程序获取input并发送网络请求
              
              1. 获取输入框数据wxml中的input上增加bindinput属性，和方法值在js部分定义与之对应的方法，只要在输入...
            

              
                [小程序]微信小程序获取位置展示地图并标注信息
              
              1.map组件的高度如果想要铺满屏幕，要是使用height:100vh样式2.获取位置要在app.json中标明权限3.先使用...
            

              
                QQ小程序支付
              
              QQ小程序支付 Java后端 同学折腾QQ小程序的支付折腾了好几天，没有完成统一下单，因为我做过微信和支付...
            

              
                .NET之微信小程序获取用户UnionID
              
              前言： 在实际项目开发中我们经常会遇到账号统一的问题，如何在不同端或者是不同的登录方式下保证同一个...
            

              
                微信小程序picker组件关于objectArray数据类型绑定
              
              一、前言： 我发现很多的同学都在抱怨说微信小程序的picker的mode = selector/mode = multiSelector 无...
            

              
                微信小程序转化为uni-app项目
              
              前言： 之前自己做一个uni-app的项目的时候前端需要实现一个比较复杂的动态tab和swiper切换的功能，但是...