对于懂代码的人来说，开发一个属于自己的小程序是相当简单的。对于那些不知道代码是什么的人，你可能要做点别的。

总结一些我自己知道的开发微信小程序的说明:

第一步:登录https://mp.weixin.qq.com，可以在网站的设置-开发者设置中查看微信小程序的AppID。注意不能直接使用服务号或订阅号的AppID，如下图所示:

注:如果你想用非管理员微信号在***上体验这个小程序，那么我们还需要操作“绑定开发者”。即在“用户身份”——“开发者”模块中，绑定需要体验小程序的微信号。本教程默认账号注册和体验都使用管理员微信号，如下图:

步骤2:创建一个项目。

我们需要通过开发者工具完成小程序的创建和代码编辑。

开发者安装好工具后，打开使用微信扫码登录。选择“项目”，填写上面获取的AppID，设置一个本地项目的名称(不是小程序的名称)，比如“我的第一个项目”，选择一个本地文件夹作为存储代码的目录，点击“新建项目”。

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

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

第三步:写代码。

创建子视图实例

我们需要通过开发者工具完成小程序的创建和代码编辑。

开发者安装好工具后，打开使用微信扫码登录。选择“项目”，填写上面获取的AppID，设置一个本地项目的名称(不是小程序的名称)，比如“我的第一个项目”，选择一个本地文件夹作为存储代码的目录，点击“新建项目”。

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

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

第四步。写代码。

创建子视图实例

点击开发者工具左侧导航中的“编辑”，我们可以看到这个项目，它已经被初始化，包含一些简单的代码文件。其中最重要最本质的就是app.js，app.json和app.wxss，。js后缀是脚本文件，。json后缀是配置文件，而。wxss后缀是样式表文件。微信小程序会读取这些文件，生成小程序实例。

我们先简单看一下这三个文件的作用，这样我们就可以轻松地从零开始修改和开发自己的微信小程序了。

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

//app.js

应用程序({

onLaunch() {

//显示本地存储能力

const logs = wx . getstoragesync(‘日志’) || []

logs.unshift(Date.now())

wx . setstoragesync(‘日志’日志)

//登录

wx.login({

成功:res = & gt{

//将res.code发送到后台，换取openId、sessionKey、unionId

}

})

//获取用户信息

wx.getSetting({

成功:res = & gt{

if(RES . auth setting[‘scope.userInfo & # 8217]) {

//授权，可以直接调用getUserInfo获取头像昵称，不用弹出框。

wx.getUserInfo({

成功:res = & gt{

//可以发送res到后台解码unionId

this . global data . userinfo = RES . userinfo

}

})

}

}

})

},

全局数据:{

userInfo:空

}

})

App.json是整个小程序的全局配置。在这个文件中，我们可以配置applet包含哪些页面、applet窗口的背景颜色、导航栏的样式和默认标题。请注意，不能向该文件添加任何注释。更多可配置项目，请参考配置详情。

{

“pages & # 8221:[

“页数/索引/索引”,

“页面/日志/日志”

],

“window & # 8221:{

“backgroundTextStyle & # 8221:”光”,

“navigationBarBackgroundColor ”: “# fff & # 8221,

“navigationBarTitleText & # 8221: “微信”,

“navigationBarTextStyle & # 8221:”布莱克”

}

}

App.wxss是整个小程序的公共样式表。我们可以直接在页面组件的class属性上使用app.wxss中声明的样式规则。

/**app.wxss**/

。容器{

身高:100%；

显示器:flex

伸缩方向:列；

对齐-项目:居中；

justify-content:space-between；

填充:200 rpx 0；

框大小:边框-框；

}

第五步。创建页面

在本教程中，我们有两个页面，索引页面和日志页面，即applet启动日志的欢迎页面和显示页面。它们都在页面目录中。微信小程序中每个页面的【路径+页面名称】都需要写在app.json的pages中，pages中的第一页就是小程序的首页。

每个小程序页面都是由四个不同的后缀文件在同一个路径下同名组成，比如:index.js，index.wxml，index.wxss，index.json文件带。js后缀是脚本文件。json后缀是配置文件，文件带有。wxss后缀是样式表文件。wxml后缀是页面结构文件。

Index.wxml是页面的结构文件:

& lt！–index.wxml & # 8211& gt

& ltview class = & # 8221集装箱”& gt

& ltview class = & # 8221userinfo & # 8221& gt

& ltblock wx:if = ”{ { hasUserInfo } } & # 8221& gt

& lti***ge bindtap = & # 8221bindViewTap & # 8221class = & # 8221userinfo-avatar ”src = & # 8221{ { userInfo.avatarUrl } } & # 8221background-size = ”封面”& gt& lt/i***ge >

& lttext class = & # 8221userinfo-昵称”& gt{ { userInfo.nickName } } & lt/text >

& lt/block >

& ltbutton wx:else open-type = ”getUserInfo & # 8221bindgetuserinfo = & # 8221getUserInfo & # 8221& gt获取头像昵称

& lt/view >

& ltview class = & # 8221用户座右铭”& gt

& lttext class = & # 8221用户座右铭”& gt{ {座右铭} } & lt/text >

& lt/view >

& lt/view >

在本例中，<>、& ltimage/>；、& lttext/>构建页面结构，绑定数据和交互处理功能。

Index.js是页面的脚本文件。在这个文件中，我们可以监控和处理页面的生命周期功能，获取小程序实例，声明和处理数据，响应页面交互事件等。

//index.js

//获取应用程序实例

const app = getApp()

页面({

数据:{

座右铭:‘你好世界’,

userInfo: {}，

hasUserInfo: false

},

//事件处理函数

bindViewTap: function() {

wx.navigateTo({

网址:‘../logs/logs ’

})

},

onLoad: function () {

if (app.globalData.userInfo) {

this.setData({

userInfo:app . global data . userInfo，

hasUserInfo: true

})

}否则{

//由于getUserInfo是一个网络请求，可能会在Page.onLoad之后返回

//所以在这里添加回调来防止这种情况。

app . userinfoeadycallback = RES = >{

this.setData({

userInfo: res.userInfo，

hasUserInfo: true

})

}

}

},

getUserInfo:函数(e) {

this.setData({

userInfo: e.detail.userInfo，

hasUserInfo: true

})

}

})

Index.wxss是页面的样式表:

/**index.wxss**/

。用户信息{

显示器:flex

伸缩方向:列；

对齐-项目:居中；

}

。用户信息-头像{

宽度:128rpx

身高:128rpx

保证金:20rpx

边界半径:50%；

}

。用户信息-昵称{

颜色:# aaa

}

。用户座右铭{

边距-顶部:200px

}

页面的样式表是不必要的。当有页面样式表时，页面的样式表中的样式规则会叠加app.wxss中的样式规则如果不指定页面的样式表，也可以在页面的结构文件中直接使用app.wxss中指定的样式规则。

Index.json是页面的配置文件:

页面的配置文件是不必要的。当页面存在配置文件时，该配置项将覆盖该页面上app.json窗口中的相同配置项。如果没有指定的页面配置文件，将在该页面上直接使用app.json中的默认配置。

日志的页面结构

& lt！–logs.wxml & # 8211& gt

& ltview class = & # 8221集装箱日志列表”& gt

& ltblock wx:for = ”{ { logs } } & # 8221wx:for-item = ”日志”& gt

& lttext class = & # 8221日志项目”& gt{{index + 1}}。{ { log } } & lt/text >

& lt/block >

& lt/view >

日志页面使用

//logs.js

const util = require(‘../../utils/util . js ’)

页面({

数据:{

日志:[]

},

onLoad: function () {

this.setData({

日志:(wx . getstoragesync(‘日志’) || []).***p(log = >{

return util.for***tTime(新日期(日志))

})

})

}

})

运行结果如下:

六、定位器预览

在工具的左侧菜单栏上，选择”项目”，点击”预览”扫码后就可以在微信客户端体验了。

有些人想做小程序却看不懂。没关系。有一种简单直接的方法；

终于，微信不再”克制”小程序，3天内发布了13个小程序新能力。虽然上次的“小程序第三方平台”只是透露了一些传闻，但是即将上线的小程序第三方平台对我们的客户来说是一个极大的利好。小程序授权后，第三方平台将可以配置服务器地址、代码开发、上传、提交发布、模板消息、客服消息、微信登录等操作。

微信小程序还增加了数据接口，开发者可以通过这个接口获取小程序数据，进行个性化的数据分析。界面中包含的数据项包括用户访问趋势、用户访问分布、用户访问留存和页面访问数据。

据业内人士透露，虽然官方不会代理小程序，但根据微信公众平台的最新公告，具备开发能力的第三方平台可以更方便地满足商家的开发需求。微信是在为小程序的后续努力做铺垫。

第三方平台可以帮你管理微信小程序；可以帮你开发维护微信小程序；可以帮你增加一些新的功能等等。

小程序第三方平台开放后，可以让商家的微信小程序开发更加省心。通过授权简单小程序账号的动作，可以得到一个小程序，让技术开发变得更容易。