未分类

微信小程序 简单教程实例详解_JavaScript_脚本之家

16 3月 , 2020  

logs
页面使用控制标签来组织代码,在上使用wx:for绑定logs数据,并将logs数量循环张开节点

//logs.jsvar util = require('../../utils/util.js')Page({ data: { logs: [] }, onLoad: function () { this.setData({ logs: (wx.getStorageSync.map { return util.formatTime }})

咱俩须要经过开辟者工具,来成功小程序制造和代码编辑。

小程序实例

{ "pages":[ "pages/index/index", "pages/logs/logs" ], "window":{ "backgroundTextStyle":"light", "navigationBarBackgroundColor": "#fff", "navigationBarTitleText": "WeChat", "navigationBarTextStyle":"black" }}
   {{userInfo.nickName}}   {{motto}} 

静心:假诺要以非管理员微时限信号在哥哥大上呼吸系统感染受该小程序,那么我们还索要操作“绑定开辟者”。即在“顾客身份”-“开垦者”模块,绑定上需求资历该小程序的Wechat号。本教程暗中同意注册帐号、体验都是采纳管理员Wechat号。

//index.js//获取应用实例var app = getApp()Page({ data: { motto: 'Hello World', userInfo: {} }, //事件处理函数 bindViewTap: function() { wx.navigateTo({ url: '../logs/logs' }) }, onLoad: function () { console.log var that = this //调用应用实例的方法获取全局数据 app.getUserInfo{ //更新数据 that.setData({ userInfo:userInfo }) }) }})

app.js是小程序的台本代码。大家能够在此个文件中监听并管理小程序的生命周期函数、声明全局变量。调用框架提供的增加的
API,如本例的一路存款和储蓄及联合读取本地数据。想打听越多可用 API,可参照他事他说加以考察API
文书档案

index.wxss 是页面包车型大巴样式表:

index.json 是页面包车型客车铺排文件:

在这里个课程里,大家有八个页面,index 页面和 logs
页面,即款待页和小程序运行日志的来得页,他们都在 pages
目录下。微信小程序中的每贰个页面包车型地铁都必要写在 app.json 的 pages 中,且
pages 中的第一个页面是小程序的首页。

其它关于它的框架和组件大家能够看文书档案

本例中运用了、“来搭建页面构造,绑定数据和相互处理函数。

连串开创成功后,大家就能够点击该项目,踏向并看见完好的开拓者工具分界面,点击左侧导航,在“编辑”里可以查看和编辑大家的代码,在“调节和测量试验”里能够测量检验代码并模仿小程序在Wechat顾客端效果,在“项目”里能够发送到手提式有线电话机里预览实效。

登录
AppID 了,注意不可直接行使服务号或订阅号的 AppID 。

下边我们简要询问那八个文件的功效,方便改过以致从头开辟协和的Wechat小程序。

开荒者工具左侧菜单栏采用”项目”,点击”预览”,扫码后就能够在Wechat顾客端中体验。

页面包车型地铁样式表是非供给的。当有页面样式表时,页面包车型地铁体制表中的体制准则会层叠覆盖
app.wxss
中的样式法规。假诺不点名页面包车型地铁样式表,也得以在页面包车型客车布局文件中一直动用
app.wxss 中内定的体裁准绳。

为便于初读书人理解Wechat小程序的核心代码布局,在创造进度中,假若接收的当三步跳件夹是个空文件夹,开拓者工具会提醒,是不是要求创制一个quick start
项目。选拔“是”,开垦者工具会支援大家在开垦目录里生成三个轻易易行的 demo。

app.json
是对全部小程序的全局配置。大家得以在此个文件中配置小程序是由什么页面组成,配置小程序的窗口背景观,配置导航条样式,配置暗中认可标题。注意该文件不可增多任何注释。更加多可配置项可参照他事他说加以考查构造详明

index.js
是页面的脚本文件,在这里个文件中我们得以监听并拍卖页面包车型地铁生命周期函数、获取小程序实例,注脚并处理多少,响应页面交互作用事件等。

点击开辟者工具左边导航的“编辑”,大家得以见见那一个项目,已经发轫化并含有了有的大致的代码文件。最要紧也是至关重要的,是
app.js、app.json、app.wxss
这四个。当中,.js后缀的是本子文件,.json后缀的文件是布署文件,.wxss后缀的是样式表文件。Wechat小程序会读取这几个文件,并生成小程序实例。

刚接触到Wechat小程序开辟,这里做叁个简短的学科:

app.wxss 是整整小程序的公物样式表。我们能够在页面组件的 class
属性上一直动用 app.wxss 中宣示的体制法规。

谢谢阅读,希望能援救到大家,多谢大家对本站的扶持!

页面包车型大巴安排文件是非必要的。当有页面包车型大巴配置文件时,配置项在该页面会覆盖
app.json 的 window
中一致的布置项。若无一些名的页面配置文件,则在该页面一向使用 app.json
中的暗中认可配置。

开拓者工具安装到位后,打开并应用Wechat扫码登陆。选取成立“项目”,填入上文获取到的
AppID
,设置一个地面品种的称呼,举例“小编的第八个品种”,并精选八个地点的公文夹作为代码存款和储蓄的目录,点击“新建项目”就能够了。

/**app.wxss**/.container { height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: space-between; padding: 200rpx 0; box-sizing: border-box;}

index.wxml 是页面包车型地铁结构文件:

4. 有线电话预览

创设页面

每一个小程序页面是由同路径下同名的三个例外后缀文件的咬合,如:index.js、index.wxml、index.wxss、index.json。.js后缀的公文是本子文件,.json后缀的文本是计划文件,.wxss后缀的是样式表文件,.wxml后缀的文本是页面构造文件。

//app.jsApp({ onLaunch: function () { //调用API从本地缓存中获取数据 var logs = wx.getStorageSync || [] logs.unshift wx.setStorageSync }, getUserInfo:function{ var that = this; if(this.globalData.userInfo){ typeof cb == "function" && cb(this.globalData.userInfo) }else{ //调用登录接口 wx.login({ success: function () { wx.getUserInfo({ success: function  { that.globalData.userInfo = res.userInfo; typeof cb == "function" && cb(that.globalData.userInfo) } }) } }); } }, globalData:{ userInfo:null }})
  {{index + 1}}. {{log}} 

1. 获得微信小程序的 AppID

3. 编写制定代码创造

/**index.wxss**/.userinfo { display: flex; flex-direction: column; align-items: center;} .userinfo-avatar { width: 128rpx; height: 128rpx; margin: 20rpx; border-radius: 50%;} .userinfo-nickname { color: #aaa;} .usermotto { margin-top: 200px;}


相关文章

发表评论

电子邮件地址不会被公开。 必填项已用*标注

网站地图xml地图