微信小程序开发-简易教程.docxVIP

?本文档将带你一步步创立完成一个微信小程序，并可以在上体验该小程序的实际效果。这个小程序的首页将会显示欢送语以及当前用户的微信头像，点击头像，可以在新开的页面中查看当前小程序的启动日志。下载源码

1.获取微信小程序的AppID

首先，我们需要拥有一个帐号，如果你能看到该文档，我们应当已经邀请并为你创立好一个帐号。注意不可直接使用效劳号或订阅号的AppID。利用提供的帐号，登录?，就可以在网站的“设置〞-“开发者设置〞中，查看到微信小程序的AppID了。

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

2.创立工程

?我们需要通过开发者工具，来完成小程序创立和代码编辑。

?开发者工具安装完成后，翻开并使用微信扫码登录。选择创立“工程〞，填入上文获取到的AppID，设置一个本地工程的名称〔非小程序名称〕，比方“我的第一个工程〞，并选择一个本地的文件夹作为代码存储的目录，点击“新建工程〞就可以了。

?为方便初学者了解微信小程序的根本代码结构，在创立过程中，如果选择的本地文件夹是个空文件夹，开发者工具会提示，是否需要创立一个quickstart工程。选择“是〞，开发者工具会帮助我们在开发目录里生成一个简单的demo。

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

3.编写代码

创立小程序实例

?点击开发者工具左侧导航的“编辑〞，我们可以看到这个工程，已经初始化并包含了一些简单的代码文件。最关键也是必不可少的，是app.js、app.json、app.wxss这三个。其中，.js后缀的是脚本文件，.json后缀的文件是配置文件，.wxss后缀的是样式表文件。微信小程序会读取这些文件，并生成小程序实例。

?下面我们简单了解这三个文件的功能，方便修改以及从头开发自己的微信小程序。

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

//app.js

App({

onLaunch:function(){

//调用API从本地缓存中获取数据

varlogs=wx.getStorageSync(logs)||[]

logs.unshift(Date.now())

wx.setStorageSync(logs,logs)

},

getUserInfo:function(cb){

varthat=this;

if(this.globalData.userInfo){

typeofcb==functioncb(this.globalData.userInfo)

}else{

//调用登录接口

wx.login({

success:function(){

wx.getUserInfo({

success:function(res){

=res.userInfo;

typeofcb==functioncb()

}

})

}

});

}

},

globalData:{

userInfo:null

}

})

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

{

pages:[

pages/index/index,

pages/logs/logs

],

window:{

backgroundTextStyle:light,

navigationBarBackgroundColor:#fff,

navigationBarTitleText:WeChat,

navigationBarTextStyle:black

}

}

?app.wxss是整个小