@langlibaitiao 2017-07-06T05:13:05.000000Z 字数 6787 阅读 1429

微信小程序Demo

微信小程序

一获取小程序的AppId

1 注册微信公众平台账号，登录：https://mp.weixin.qq.com，就可以在网站的“设置”-“开发者设置”中，查看到微信小程序的 AppID 。

注意：如果要以非管理员微信号在手机上体验该小程序，那么我们还需要操作“绑定开发者”。即在“用户身份”-“开发者”模块，绑定上需要体验该小程序的微信号。本文档默认注册帐号、体验都是使用管理员微信号。

二微信开发者工具

1 我们需要通过开发者工具，来完成小程序创建和代码编辑。开发者工具集成了开发调试、代码编辑及程序发布等功能。

2 开发者工具下载地址

三创建项目

1 开发者工具安装完成后，打开并使用微信扫码登录。选择创建“项目”，填入上文获取到的 AppID，设置一个本地项目的名称（非小程序名称），比如“小程序demo”，并选择一个本地的文件夹作为代码存储的目录，点击“新建项目”就可以了。

2 在创建过程中，如果选择的本地文件夹是个空文件夹，开发者工具会提示，是否需要创建一个 quick start 项目。选择“是”，开发者工具会帮助我们在开发目录里生成一个简单的 demo。其中初始化了文件结构并包含了一些简单的文件。

3 项目创建成功后，我们就可以点击该项目，进入并看到完整的开发者工具界面，点击左侧导航，在“编辑”里可以查看和编辑我们的代码，在“调试”里可以测试代码并模拟小程序在微信客户端效果，在“项目”里可以发送到手机里预览实际效果。

四小程序文件目录结构介绍

1 小程序文件格式介绍

在项目中我们可以看到四种文件类型：

.js后缀的文件是脚本文件，页面的交互等代码在这里实现；
.json后缀的文件是配置文件，主要是json数据格式存放，用于设置程序的配置效果；
.wxss后缀的是样式表文件，类似于前端中的css,用于对界面进行美化；
.wxml后缀的文件是页面结构文件，用于构建页面，在页面上增加控件。

2 pages目录介绍

pages:主要存放小程序的页面文件，其中每个文件夹为一个页面，每个页面包含四个文件，.wxml文件是界面文件，.js是事件交互文件，用于处理界面的点击事件等功能；.wxss为界面美化文件，让界面显示的更加美观；.json为配置文件，用于修改导航栏显示样式等，小程序每个页面必须有.wxml和.js文件，其他两种类型的文件可以不需要。

注意：文件名称必须与页面的文件夹名称相同，如index文件夹，文件只能是index.wxml、index.wxss、index.js和index.json.

3 utils目录介绍

3.1 该文件夹主要用于存放全局的一些.js文件，公共用到的一些事件处理代码文件可以放到该文件夹下，用于全局调用。

module.exports = {
  formatTime: formatTime
}

对于允许外部调用的方法，用module.exports进行声明，才能在其他js文件中用一下代码引入

var util = require('../../utils/util.js')

然后就可以调用该方法。

4 app.js、app.json、app.wxss

app.js :小程序的脚本代码。我们可以在这个文件中监听并处理小程序的生命周期函数、声明全局变量。调用框架提供的丰富的 API，如本例的同步存储及同步读取本地数据。想了解更多可用 API，可参考 [API文档]

    //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.login({
        success: function () {
          wx.getUserInfo({
            success: function (res) {
              that.globalData.userInfo = res.userInfo
              typeof cb == "function" && cb(that.globalData.userInfo)
            }
          })
        }
      })
    }
  },
  globalData:{
    userInfo:null
  }
})

app.json : 是对整个小程序的全局配置。我们可以在这个文件中配置小程序是由哪些页面组成，配置小程序的窗口背景色，配置导航条样式，配置默认标题。注意该文件不可添加任何注释。更多可配置项可参考[配置详解]

部分配置解释：

此处tabBar下的list为底部列表栏配置；注意：tabBar如果设置，最少要两个，最多不能超过五个。

networkTimeout和debug可以设置各种网络请求的超时时间

debug：可以在开发者工具中开启debug模式，在开发者工具的控制台面板，调用信息以info的形式给出，其信息有page注册、页面路由、数据更新和时间触发，可以帮开发者快速定位一些常见信息。

    {
  "pages":[
    "pages/index/index",
    "pages/logs/logs",
    "pages/serviceList/serviceList",
    "pages/weather/weather"
  ],
  "window":{
    "backgroundTextStyle":"light",
    "navigationBarBackgroundColor": "pink",
    "navigationBarTitleText": "WeChat",
    "navigationBarTextStyle":"black"
  },
   "tabBar": {
    "list": [{
      "pagePath": "pages/index/index",
      "text": "首页"
    }, {
      "pagePath": "pages/logs/logs",
      "text": "日志"
    }, {
      "pagePath": "pages/weather/weather",
      "text": "天气"
    }],
    "color": "black",
    "backgroundColor": "pink",
    "selectedColor": "#fff",
    "borderStyle": "#ccc"
  },
  "networkTimeout": {
    "request": 20000,
    "connectSocket": 20000,
    "uploadFile": 20000,
    "downloadFile": 20000
  },
  "debug": true
}

app.wxss : 全局的界面美化代码

    /**app.wxss**/
    .container {
      height: 100%;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: space-between;
      padding: 200rpx 0;
      box-sizing: border-box;
}

5 程序与页面注册.js

1 小程序注册
App() 函数用来注册一个小程序。接受一个 object 参数，其指定小程序的生命周期函数等。

//app.js
App({
  //程序运行时执行一次
  onLaunch: function () {
    //调用API从本地缓存中获取数据
    var logs = wx.getStorageSync('logs') || []
    logs.unshift(Date.now())
    wx.setStorageSync('logs', logs)
  },
  //程序从后台进入前台运行时执行一次
  onShow: function () {
  },
  //程序进入后台时运行（按Home键）
  onHide: function () {
  },
  //我们自己写的代码
  getUserInfo:function(cb){
    var that = this
    if(this.globalData.userInfo){
      typeof cb == "function" && cb(this.globalData.userInfo)
    }else{
      //调用登录接口
      wx.login({
        success: function () {
          wx.getUserInfo({
            success: function (res) {
              that.globalData.userInfo = res.userInfo
              typeof cb == "function" && cb(that.globalData.userInfo)
            }
          })
        }
      })
    }
  },
  //全局函数，可以在其他页面通过接口获取到，全局使用的参数可以在这里进行声明
  globalData:{
    userInfo:null
  }
})

全局参数可以在其他页面通过下面方法获取到

    var app = getApp();
    console.log(app. globalData)

2 注册一个页面

Page({
  data:{
    info: 'welcome to 魔都'
  },
  onLoad:function(options){
    // 页面初始化 options为页面跳转所带来的参数
  },
  onReady:function(){
    // 页面渲染完成
  },
  onShow:function(){
    // 页面显示
  },
  onHide:function(){
    // 页面隐藏
  },
  onUnload:function(){
    // 页面关闭
  }
})

Page({})，注册一个页面，这里我注册了一个欢迎页的界面，中间的代码为声明周期函数，可以不实现，但是Page({})结构必须创建。

注意：只有在data中声明的数据能够正常使用

五本demo中的一些方法与属性

1 响应的数据绑定

整个系统分为两块视图层（View）和逻辑层（App Service）

框架可以让数据与视图非常简单地保持同步。当做数据修改的时候，只需要在逻辑层修改数据，视图层就会做相应的更新。

通过这个简单的例子来看：

index.wxml文件下：

    <view class="usermotto">
        <text class="user-motto">Hello {{motto}}</text>
    </view>
    <button bindtap="changeName">Click me!</button>
    <view bindtap="bindViewService" class="userservice">
        <text class="user-service">Hello {{serviceInfo}}</text>
    </view>

index.js文件下：

//index.js
//获取应用实例
var app = getApp()
Page({
  data: {
    motto: '综合服务生活平台',
    clickData: '点我试试',
    userInfo: {}
  },
  changeName: function (e) {
    this.setData({
      motto: "智橙生活",
      clickData: '试试就试试',
    })
  },
  onLoad: function () {
    var that = this
    //调用应用实例的方法获取全局数据
    app.getUserInfo(function(userInfo){
      //更新数据
      that.setData({
        userInfo:userInfo
      })
    })
  }
})

开发者通过框架将逻辑层数据中的 moto 与视图层的 moto 进行了绑定，所以在页面一打开的时候会显示 Hello World
当点击按钮的时候，视图层会发送 changeName 的事件给逻辑层，逻辑层找到对应的事件处理函数
逻辑层执行了 setData 的操作，将 moto 从综合服务生活平台变为智橙生活，因为该数据和视图层已经绑定了，从而视图层会自动改变为智橙生活。
路由：页面跳转
调用 API wx.navigateTo 或使用组件 < navigator open-type="navigateTo" />
列表渲染：wx:for
在组件上使用 wx:for 控制属性绑定一个数组，即可使用数组中各项的数据重复渲染该组件。

2 页面代码

pages/weather/weather.js

var util = require('../../utils/util.js')
Page({
  data: {
   //数据初始化
    date: util.formatTime(new Date()),
    weather: {},
    loading: false
  },
  onLoad:function(options){
    // 页面初始化 options为页面跳转所带来的参数
     var vm = this;
    setInterval(function(){
      vm.setData({
        date: util.formatTime(new Date())
      });
    }, 1000);
  },
  onReady:function(){
    // 页面渲染完成
  },
  onShow:function(){
    // 页面显示
      var vm = this;
    //请求数据
    wx.request({
      url: 'http://apistore.baidu.com/microservice/weather',
      header: {
          'Content-Type': 'application/json'
      },
      success: function(res) {
        console.log(res.data);
        vm.setData({
            weather:res.data
        });
      }
    });
  },
   updateWeather: function () {
    var vm = this;
    vm.setData({
        loading: !vm.data.loading
    });
    wx.request({
      url: 'http://apistore.baidu.com/microservice/weather',
      header: {
          'Content-Type': 'application/json'
      },
      success: function(res) {
        vm.setData({
            weather:res.data,
            loading: !vm.data.loading
        });
      }
    });
  },
  onHide:function(){
    // 页面隐藏
  },
  onUnload:function(){
    // 页面关闭
  }
})

pages/weather/weather.json

{
    //头部标题栏
    "navigationBarTitleText": "全国天气查询"
}

pages/weather/weather.wxml

<!--pages/weather/weather.wxml-->
<view class="container-weather">
    <text>{{weather.date}}</text>
    <view class="weather" style="flex-direction:row;">
      <text class="text-weather">{{weather.weather}}, {{weather.wind}}</text>
      <image class="icon-weather" src="{{weather.dayPictureUrl}}" background-size="cover"></image>
    </view>
    <text class="text-weather">温度: {{weather.temperature}}</text>
    <view>
      <text class="tips-weather">{{weather.tipt.tipt}}: </text>
      <text class="tips-desc">{{weather.tipt.des}}</text>
    </view>
    <view class="button-wrapper">
      <button bindtap="updateWeather" loading="{{loading}}">刷新</button>
    </view>
</view>

pages/weather/weather.wxss

//pages/weather/weather.wxss
.container-weather {
  padding: 30px;
}
.weather {
  height: 30px;
  display: flex;
}
.text-weather {
  line-height: 30px;
  padding-right: 30px;
}
.icon-weather {
  width: 42px;
  height: 30px;
  border-radius: 50%;
}
.button-wrapper {
    position: absolute;
    bottom: 50px;
    left: 30px;
    width: 100%;
}

至此：一个简单的小demo就完成了。

更多信息
[微信公众平台开发者社区]
[框架、组件、API、工具]
[微信小程序联盟]