微信小程序开发官方文档.pdfVIP

微信⼩程序开发官⽅⽂档 本⽂档将带你⼀步步创建完成⼀个微信⼩程序，并可以在⼿机上体验该⼩程序的实际效果。这个⼩程序的⾸页将会显⽰欢迎语以及当前⽤户 的微信头像，点击头像，可以在新开的页⾯中查看当前⼩程序的启动⽇志。下载源码 注意：如果我们不是⽤注册时绑定的管理员微信号，在⼿机上体验该⼩程序。那么我们还需要操作“绑定开发者”。即在“⽤户⾝ 份”-“开发者”模块，绑定上需要体验该⼩程序的微信号。本教程默认注册帐号、体验都是使⽤管理员微信号。 2、创建项⽬ 我们需要通过开发者⼯具，来完成⼩程序创建和代码编辑。 开发者⼯具安装完成后，打开并使⽤微信扫码登录。选择创建“项⽬”，填⼊上⽂获取到的 AppID ，设置⼀个本地项⽬的名称（⾮⼩程序 名称），⽐如“我的第⼀个项⽬”，并选择⼀个本地的⽂件夹作为代码存储的⽬录，点击“新建项⽬”就可以了。 为⽅便初学者了解微信⼩程序的基本代码结构，在创建过程中，如果选择的本地⽂件夹是个空⽂件夹，开发者⼯具会提⽰，是否需要创建⼀ 个 quick start 项⽬。选择“是”，开发者⼯具会帮助我们在开发⽬录⾥⽣成⼀个简单的 demo。 项⽬创建成功后，我们就可以点击该项⽬，进⼊并看到完整的开发者⼯具界⾯，点击左侧导航，在“编辑”⾥可以查看和编辑我们的代码， 在“调试”⾥可以测试代码并模拟⼩程序在微信客户端效果，在“项⽬”⾥可以发送到⼿机⾥预览实际效果。 3、编写代码 创建⼩程序实例 点击开发者⼯具左侧导航的“编辑”，我们可以看到这个项⽬，已经初始化并包含了⼀些简单的代码⽂件。最关键也是必不可少的，是 app.js、app.json、app.wxss 这三个。其中，.js后缀的是脚本⽂件，.json后缀的⽂件是配置⽂件，.wxss后缀的是样式表⽂件。微信⼩程 序会读取这些⽂件，并⽣成⼩程序实例。 下⾯我们简单了解这三个⽂件的功能，⽅便修改以及从头开发⾃⼰的微信⼩程序。 app.js是⼩程序的脚本代码。我们可以在这个⽂件中监听并处理⼩程序的⽣命周期函数、声明全局变量。调⽤框架提供的丰富的 API，如本 例的同步存储及同步读取本地数据。想了解更多可⽤ API，可参考 API ⽂档。 1 //app.js 2 App({ 3 onLaunch: function () { 4 //调⽤API从本地缓存中获取数据 5 var logs = wx.getStorageSync(logs) || [] 6 logs.unshift(Date.now()) 7 wx.setStorageSync(logs, logs) 8 }, 9 getUserInfo:function(cb){ 10 var that = this; 11 if(this.globalData.userInfo){ 12 typeof cb == function cb(this.globalData.userInfo) 13 }else{ 14 //调⽤登录接⼝ 15 wx.login({ 16 success: function () { 17 wx.getUserInfo({ 18 success: function (res) { 19 that.globalData.userInfo = res.userInfo; 20 typeof cb == function cb(that.globalData.userInfo) 21 } 22 }) 23 } 24 }); 25 } 26 }, 27 globalData:{ 28 userInfo:null 29 } 30 }) 31 app.json 是对整个⼩程序的全局配置。我们可以在这个⽂件中配置⼩程序是由哪些页⾯组成，配置⼩程序的窗⼝背景⾊，配置导航条样式，配置默认标题。 32