微信小程序开发简单教程微信小程序制作方法

如何开发微信小程序？微信小程序是一个不用安装就可以使用的小程序。TA可以在微信上轻松快速传播。小程序和微信微信官方账号的存在是平行系统。开发微信小程序，需要掌握以下步骤。

　　微信小程序开发简易教程：

　　1、获取微信小程序的 AppID

登录微信公众平台，可以在网站的设置-开发者设置中查看微信小程序的AppID。请注意，您不能直接使用服务号或订阅号的AppID。

注意：如果想在非管理员微信号的手机上体验小程序，还需要操作“绑定开发者”。也就是在“用户身份”——“开发者”模块，你需要体验小程序的微信号。默认情况下，本教程使用管理员微信号注册帐户和体验。

　　2、创建项目

我们需要使用开发工具来创建小程序和编辑代码。

开发者工具安装好后，打开使用微信扫码登录。选择create project，填写上面得到的AppID，设置一个本地项目的名称(不是applet的名称)，比如我的第一个项目，选择一个本地文件夹作为代码存储的目录，点击create new project。

为了方便初学者了解微信小程序的基本代码结构，如果在创建过程中选择的本地文件夹为空，开发者工具会提示是否创建快速启动项目。选择“是”，开发人员工具将帮助我们在开发目录中生成一个简单的演示。

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

　　3、编写代码

创建一个小程序实例：

在开发人员工具的左侧导航中点击“Edit”，我们可以看到这个项目已经初始化，并且包含一些简单的代码文件。最关键、最本质的是app.js、app.json、app.wxss，其中，js后缀是脚本文件，json后缀是配置文件。wxss后缀是样式表文件。微信小程序会读取这些文件，生成小程序实例。

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

App.js是小程序的脚本代码。在这个文件中，我们可以监听和处理小程序的生命周期函数，并声明全局变量。调用框架提供的丰富的API，比如这个例子中本地数据的同步存储和同步读取。要了解更多可用的应用编程接口，请参考应用编程接口文档

01//app.js

02App({ 0

03onLaunch:函数(){ 0

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

05 var log=wx . getstoragesync(' log ')| |[]

06logs.unshift(Date.now())

07wx.setStorageSync('日志，日志)

08},

09 getuser info : function(CB){ 0

10var这个；

11 if(this . GlobalDATa . UserInfo){ 0

12 type of CB==' function ' CB(this . GlobalDATa . UserInfo)

13 }其他{

14//呼叫登录界面

15wx . log in({ 0

16success:函数(){ 0

17wx . GetUserInfo({ 0

18success:函数(RES){ 0

19 that . global data . userinfo=RES . userinfo；

20 type of CB==' function ' CB(that . GlobalDATa . UserInfo)

21}

22})

23}

24});

25}

26},

27globalData:{

28用户信息：完整

29}

30})

复制代码

//app.js

app({ 0

onLaunch:函数(){ 0

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

var log=wx . getstorageync(' log ')| |[]

logs.unshift(Date.now())

wx.setStorageSync('日志，日志)

},

getuserinfo : function(CB){ 0

变量=这个；

if(this . global data . UserInfo){ 0

type of CB==' function ' CB(this . global data . UserInfo)

}else{

//调用登录界面

wx . log in({ 0

success:函数(){ 0

wx . GetUserInfo({ 0

成功：功能(RES){ 0

that . global data . userinfo=RES . userinfo；

type of CB==' function ' CB(that . global data . UserInfo)

}

})

}

});

}

},

globaldata :

用户id信息：空

}

})