第二批四合一网站建设服务商

电脑端+手机端+微信端=数据同步管理【响应式领导者】

免费咨询热线:133-9216-5160 吴经理

您当前的位置: 深圳网站建设公司 > 网站建设知识《深入浅出:搭建你的第一个微信小程序开发项目》

《深入浅出:搭建你的第一个微信小程序开发项目》

时间:2023-03-05  来源:深圳网站建设  作者:做网站

《深入浅出:搭建你的第一个微信小程序开发项目》(图1)

## 深入浅出:搭建你的第一个微信小程序开发项目

微信小程序可以说是近几年最火爆的互联网项目了,几乎每一个互联网公司都在寻求投身小程序的机会。那么,如果你也想加入微信小程序的开发队伍,该如何入门呢?

### 第一步:获取微信开发者工具

微信小程序的开发是基于微信开发者工具进行的,所以第一步就是去微信公众平台下载开发者工具。

![](/assets/微信截图_20170918141447.png)

下载完成之后,打开微信开发者工具,会要求你输入微信公众平台的账号和密码进行登录。

![](/assets/微信截图_20170918142040.png)

登录之后,会看到一个项目列表,目前还没有项目,所以我们点击右上角的“+”号来新建一个项目。

![](/assets/微信截图_20170918142258.png)

在新建项目的界面里,我们需要填写项目名称、AppID(可以在微信公众平台里面申请)、项目目录(这里填写一个本地目录)。

![](/assets/微信截图_20170918143430.png)

点击“确定”之后,就可以看到刚才新建的项目了。

### 第二步:项目结构

打开刚才新建的项目,我们会看到项目的目录结构,其中,小程序的主要代码放在`app.js`,`app.json`,`app.wxss`这三个文件中。

![](/assets/微信截图_20170918143750.png)

### 第三步:编写代码

#### app.json

app.json是小程序的全局配置文件,我们可以在这个文件里面配置小程序的页面路径、窗口表现、设置网络超时时间、设置多tab应用等。

```json

{

"pages":[

"pages/index/index",

"pages/logs/logs"

],

"window":{

"backgroundTextStyle":"light",

"navigationBarBackgroundColor": "#fff",

"navigationBarTitleText": "WeChat",

"navigationBarTextStyle":"black"

}

}

```

#### app.js

app.js是小程序的全局Js文件,我们可以在这个文件中申明全局变量,并通过`getApp()`方法访问到这些全局变量。

```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.wxss

app.wxss是小程序的全局样式表文件,我们可以在这个文件中编写全局样式,这些样式将会作用于小程序的所有页面。

```

.container {

width: 100%;

height: 100%;

}

```

### 第四步:运行代码

编写完代码之后,我们可以点击微信开发者工具的“编译”按钮来编译代码。

![](/assets/微信截图_20170918144659.png)

编译成功之后,我们可以点击“预览”按钮来预览小程序。

![](/assets/微信截图_20170918144722.png)

预览成功之后,我们可以在手机上体验小程序。

![](/assets/微信截图_20170918144811.png)

到这里,我们已经成功的搭建了一个微信小程序的开发环境,



以上就是对“《深入浅出:搭建你的第一个微信小程序开发项目》“的介绍,相信您有一定的了解了,如果想了解更多,也可以咨询我们在线客服。本文是由深圳网站建设爱卡蒙网路于1677992634发布,爱卡蒙网络8年来专注网站建设,作为响应式网站设计的首批领衔者!我们在网站设计,网站制作开发,微信小程序公众号开发等业务上多年来不忘初心!多年来为数百家中小商家企业进行网建制作/建设服务!欢迎咨询!

本文标题:《深入浅出:搭建你的第一个微信小程序开发项目》

点此在百度搜索本文

本文网址:https://www.ikmeng.com/news/15847.html



您的项目需求

*请认真填写需求信息,我们会在24小时内与您取得联系。

猜你想看

在线客服