这个文本文档会一步一步陪你创建一个微信小程序，你可以在手机上感受小程序的预期效果。这个小程序的首页可能会显示信息欢迎标语和当前客户的微信图片。点击头像图片，可以在新打开的网页中查询今天小程序的启动日志。下载免费源代码
1.获取微信小程序的AppID。
登录https://mp.weixin.qq.com，可以在网站的“设置”-“开发者设置”中找到微信小程序的AppID。请注意，不能立即申请微信服务号或微信订阅号的AppID。
注:如果你要用非管理员的微信号感受手机上的小程序，那么你必须实际 *** 作“关联开发者”。也就是在“客户真实身份”——“开发者”控制模块中，你必须在关联中感受小程序的微信号。这个例子教程默认设置是注册一个新账号，感觉都是应用管理者的微信号。
2.创建项目
每个人都必须根据开发者工具来创建小程序和编辑代码。
开发者安装好工具后，打开应用微信扫描登录。选择“项目”，填写上面获取的AppID，设置一个本地项目的名称(不是小程序的名称)，比如“我的第一个项目”，选择一个本地文件夹名称作为代码存储的文件目录，点击“新建项目”。
为了方便新手掌握微信小程序的基本编码结构，在整个创建过程中，如果选择的本地文件夹名称是a空文件夹名称，开发者工具会提醒是否需要创建快速入门项目。选择“是”，开发者工具会帮助我们在开发设计文件目录下形成一个简单的演示。
项目创建成功后，可以点击项目，前往并看到详细的开发者工具页面，点击左侧导航栏，可以在“编写”中查询并编写你的代码，在“调整”中测试程序并模拟pc版微信中小程序的实际效果，在“项目”中发送到你的手机中浏览预期效果。
3.写代码
创建一个applet案例
点击开发者工具左侧导航栏中的“写”，我们可以看到这个项目，它已经被重置，包含了一些简单的代码文档。其中最重要最不可或缺的是app.js、app.json和app.wxss。js后缀是脚本文件。json后缀是环境变量，而。wxss后缀是css样式表文档。微信小程序会加载这个文档，形成一个小程序案例。
让我们简单掌握这三个文档的功能，方便修改，从零开始开发设计自己的微信小程序。
App.js是小程序的脚本代码。我们可以监控和解决小程序的生命周期函数，在这个文档中声明静态变量。启用架构所呈现的丰富多彩的API，比如本例中本地数据信息的相同存储和相同加载。要掌握大量可用的API，请参考API文本文档。
//app.jsApp({
OnLaunch:function(){//启用API从本地缓存文件中读取数据
varlogs=wx.getstoragesync('logs')||[]
logs.unshift(Date.now())
wx.setStorageSync('logs'，日志)
},
getuserinfo:function(CB){varthat=this；if(this.globaldata.userinfo){typeofCB=="function"&；&cb(this.globalData.userInfo)
}else{//启用登录套接字
wx.login({
成功:函数(){
wx.getUserInfo({
成功:函数(res){
that.globaldata.userinfo=RES.userinfo；cb=="函数"的类型。&cb(that.globalData.userInfo)
}
})
}
});
}
},
全局数据:{
userInfo:空
}
})
App.json是所有小程序的全局配置。我们可以给这个文档提供小程序是什么网页做的，小程序的对话框背景色，导航栏样式，默认设置标题。请注意，不能用所有的注释对文档进行注释。对于大量可以装备的物品，请参考装备的详细说明。
{"页面":["页面/索引/索引"，"页面/日志/日志"
]、"window":{"backgroundtextstyle":"light"、"navigationBarBackgroundColor":"#fff"、"navigationBarTitleText":"微信"、"navigationBarTextStyle":"black"
}
}
App.wxss是所有小程序的通用css样式表。我们可以立即将app.wxss中声明的样式标准应用到网页部件的类特性中。
/**app.wxss**/。容器{高度:100%；显示器:flex伸缩方向:列；对齐-项目:居中；justify-content:space-between；填充:200rpx0；框大小:边框-框；
}
创建网页
在本示例教程中，我们有两个网页，索引网页和日志网页，即热烈欢迎页面和小程序启动日志的显示页面，它们都在pages文件目录中。微信小程序中每个网页的页面名称都必须写在app.json的pages中，pages中的第一个网页就是小程序的首页。
每个小程序网页都是由四个不同后缀的相同名称的文档以相同的方式组成，比如:index.js，index.wxml，index.wxss，index.jsonDocumentswith。js后缀是脚本文件。json后缀是环境变量，文件带有。wxss后缀是css样式表，文档带有。wxml后缀是网页构造文件。
Index.wxml是页面的结构文档:
{{userInfo.nickName}}{{座右铭}}
在本例中，、用于构建网页结构、关联数据信息和交互处理功能。
Index.js是网页的脚本文件。在这个文档中，我们可以监控和解决网页的生命周期功能，获取小程序案例，申报和解决数据信息，响应网页交互的恶性事件等。
//index.js//获取用例varapp=getApp()
页面({
数据:{
座右铭:“你好，世界”，
userInfo:{}
}，//事故处理功能
bindViewTap:function(){
wx.navigateTo({
'url:'../logs/logs
})
},
onLoad:function(){console.log('onLoad')var=this
//启用用例获取全局数据信息。
app.getuserinfo(function(userinfo){//升级数据信息
that.setData({
用户信息:用户信息
})
})
}
})
Index.wxss是网页的css样式表:
/**index.wxss**/。userinfo{显示:flex伸缩方向:列；对齐-项目:居中；
}.userinfo-avatar{width:128rpx；身高:128rpx保证金:20rpx边界半径:50%；
}.userinfo-昵称{color:#AAA；
}.用户格言{margin-top:201080x；
}
网页的css样式表是可选的。当有网页的css样式表时，网页的css样式表中的样式标准会叠加并覆盖app.wxss中的样式标准如果没有指定网页的css样式表，也可以立即在页面的结构文档中应用app.wxss中的特定样式标准。
Index.json是网页的环境变量:
网页的环境变量是可选的。当一个网页存在环境变量时，装备项会覆盖该网页中app.json窗口中相同的装备项。如果没有特定的网页环境变量，app.json中的默认设置将立即应用于网页。
日志的网页结构
{{index1}}。{{log}}
日志网页使用 *** 作标记来组织组织代码，wx:for来关联日志数据信息，并将日志数据信息循环展开到连接点。
//logs.jsvarutil=require('../../utils/util.js’)
页面({
数据:{
日志:[]
},
onLoad:function(){this.setdata({
日志:(wx.getStorageSync('logs')||[])。map(function(log){returnutil.formattime(newDate(log))
})
})
}
})
结果如下:
4.在手机上浏览
在工具左侧的工具栏中选择“项目”，点击“浏览”，扫描二维码后即可在pc版微信中感受到。
来源:美趣。com
注:阅读相关网站基本建设方法的文章，请移至网站建设教程频道栏目。
欢迎分享，转载请注明来源：内存溢出
微信扫一扫
支付宝扫一扫
评论列表（0条）