对于懂代码的人来说，开发一个属于自己的小程序是相当简单的。对于不知道代码是什么的人来说，你可能就像其他设施一样。

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

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

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

第二步:建立项目。

我们需要构建小程序，通过开发者工具编辑代码。

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

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

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

第三步:编写代码

建立一个小程序实例

我们需要构建小程序，通过开发者工具编辑代码。

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

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

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

第四步。写代码

建立一个小程序实例

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

先简单了解一下这三个文件的功效，以便修改和重新开发自己的微信小程序。

App.js是小程序的脚本代码。在这个文件中，我们可以监控和处理小程序的生命周期函数，并声明全局变量。盗用框架提供的厚API，比如这种情况下同步存储和同步读取内陆数据。要了解关于可用API的更多信息，请参考API文档。

//app.js

应用程序({

onLaunch() {

//展示内陆存储能力

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

logs.unshift(Date.now())

wx.setStorageSync(‘logs ‘，日志)

//登录

wx.login({

成功:res = gt{

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

}

})

//获取用户信息

wx.getSetting({

成功:res = gt{

if(RES . auth setting[‘ scope . userinfo ‘]){

//已经授权，可以直接挪用getUserInfo获取头像昵称，不用弹窗。

wx.getUserInfo({

成功:res = gt{

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

this . global data . userinfo = RES . userinfo

}

})

}

}

})

},

全局数据:{

userInfo:空

}

})

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

{

“页数”:[

“页数/索引/索引”，

“页面/日志/日志”

],

“窗口”:{

” backgroundTextStyle “:”光”，

” navigationBarBackgroundColor “:” # fff “，

” navigationBarTitleText “:”微信”，

” navigationBarTextStyle “:”黑色”

}

}

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

/**app.wxss**/

。容器{

身高:100%；

显示器:flex

伸缩方向:列；

对齐-项目:居中；

justify-content:space-between；

填充:200 rpx 0；

框大小:边框-框；

}

第五步。创建页面

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

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

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

lt！–index . wxml- gt；

ltview class=”container ” >

ltview class=”userinfo ” >

ltblock wx:if = ” { { has userinfo } } ” gt；

ltimage bind tap = ” bindViewTap ” class = ” userinfo-avatar ” src = ” { { userinfo . avatar URL } } ” background-size = ” cover ” gt； lt/image gt；

lttext class=”userinfo-nickname ” >{ { userInfo.nickName } } lt/text gt；

lt/block gt；

ltbutton wx:else open-type = ” get userinfo ” bindget userinfo = ” get userinfo ” gt；获得头像昵称

lt/view gt；

ltview class=”usermotto ” >

lttext class=”user-motto ” >{ {座右铭} } lt/text gt；

lt/view gt；

lt/view gt；

Seo外链技巧，为什么要做seo外链？

在这个例子中，

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

//index.js

//获取应用程序实例

const app = getApp()

页面({

数据:{

座右铭:“你好，世界”，

userInfo: {}，

hasUserInfo: false

},

//事件处理函数

bindViewTap: function() {

wx.navigateTo({

‘ url:’../logs/logs

})

},

onLoad: function () {

if (app.globalData.userInfo) {

this.setData({

userInfo:app . global data . userInfo，

hasUserInfo: true

})

}否则{

//因为getUserInfo是网络请求，所以可能会在Page.onLoad之后返回。

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

app . userinfoeadycallback = RES = gt；{

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- gt；

ltview class=”container log-list ” >

ltblock wx:for = ” { { logs } } ” wx:for-item = ” log ” gt；

lttext class=”log-item ” >{{index + 1}}。{ { log } } lt/text gt；

lt/block gt；

lt/view gt；

日志页面使用

//logs.js

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

页面({

数据:{

日志:[]

},

onLoad: function () {

this.setData({

日志:(wx.getStorageSync(‘logs’) || [])。map(log = gt；{

return util.formatTime(新日期(日志))

})

})

}

})

操作效果如下:

第六。手机预览

在开发者工具左侧菜单栏选择“项目”，点击“预览”，扫码后即可在微信客户端体验。

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

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

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

业内人士表示，虽然官方不会代理小程序，但从微信公众平台的最新通知来看，具备开发能力的第三方平台更容易满足商家的开发需求。微信是在为小程序的后续努力做铺垫。

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

小程序第三方平台开放后，可以让商家的微信小程序开发更加省心。只需对小程序账号进行授权，就可以获得一个小程序，让技术开发变得更加简单。