了解更多企业以及行业的动态

立即咨询
您现在所在的位置是: 首页> 资讯> 行业动态
微信小程序怎么开发:编写小代码创建小程序实例点击工具导航的“编辑器”|昱远信息系统开发
发布:2022-05-05 浏览:28

首先你要有小程序账号,登录微信公众平台,选择微信小程序去注册,根据提示完成小程序的注册。

完成注册后,登录小程序后台,开始开发前的准备工作。

首先需要获取小程序ID,设置-开发设置-appID

下载开发工具,小程序首页-开发工具-通用小程序开发开发者工具-工具-微信开发者工具,然后根据你的电脑系统选择对应的版本,然后下载安装。

新项目

登录下载已安装的开发者工具,新建项目目录并选择,然后填写小程序ID并登录

登录后,我们看一下主界面

整个开发工具基本分为三个部分:

顶行:table-item 每个按钮代表一个页面

左框:webview 此处实时显示你的页面

右框:chrome调试工具 系统定制开发 ,姑且称之为吧小程序开发制作,因为它确实是一个使用charome的调试工具,可以调试页面样式、js、网络检测、输入输出等。

写一个小示例代码

创建一个小程序实例

点击开发者工具导航中的“Editor”,我们可以看到这个项目,初始化并包含一些简单的代码文件。最关键和必不可少的是 app.js、app.json 和 app.wxss。 .js后缀为脚本文件,.json后缀为配置文件,.wxss后缀为样式表文件。微信小程序会读取这些文件并生成小程序实例。

我们先简单了解一下这三个文件的作用,方便修改,从零开始开发自己的微信小程序。

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

//app.js

应用程序({

网站前端程序制作开发策划_微信小程序怎么开发_小程序开发制作

onLaunch: 函数() {

//调用API从本地缓存中获取数据

var logs = wx.getStorageSync('logs') || []

logs.unshift(Date.now())

wx.setStorageSync('logs', 日志)

},

getUserInfo:function(cb){

var that = this;

如果(this.globalData.userInfo){

typeof cb == 'function' && cb(this.globalData.userInfo)

}其他{

//调用登录接口

wx.login({

成功:函数(){

wx.getUserInfo({

成功:函数(res){

that.globalData.userInfo = res.userInfo;

typeof cb == 'function' && cb(that.globalData.userInfo)

}

})

}

网站前端程序制作开发策划_微信小程序怎么开发_小程序开发制作

});

}

},

全局数据:{

用户信息:空

}

})

app.json 是整个小程序的全局配置。在这个文件中,我们可以配置小程序由哪些页面组成,配置小程序的窗口背景颜色,配置导航栏的样式,配置默认标题。请注意,不能向此文件添加评论。更多可配置项,请参考配置详情。

{

'页面':[

'pages/index/index',

'页面/日志/日志'

],

'窗口':{

'backgroundTextStyle':'光',

'navigationBarBackgroundColor': '#fff',

'navigationBarTitleText': '微信',

'navigationBarTextStyle':'黑色'

}

}

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

网站前端程序制作开发策划_微信小程序怎么开发_小程序开发制作

/**app.wxss**/

.container {

身高:100%;

显示:弹性;

弹性方向:列;

对齐项目:居中;

justify-content: space-between;

填充:200rpx 0;

box-sizing:border-box;

}

创建页面

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

每个小程序页面由四个后缀不同的文件组成,在同一个路径同名,如:index.js、index.wxml、index.wxss、index.json。 .js后缀的文件是脚本文件,.json后缀的文件是配置文件,.wxss后缀的文件是样式表文件小程序开发制作 系统定制开发 ,.wxml后缀的文件后缀为页面结构文件。

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

{{userInfo.nickName}}

{{座右铭}}

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

//index.js

//获取应用实例

var app = getApp()

页面({

微信小程序怎么开发_小程序开发制作_网站前端程序制作开发策划

数据:{

座右铭:'Hello World',

用户信息:{}

},

//事件处理程序

bindViewTap: 函数() {

wx.navigateTo({

网址:'../logs/logs'

})

},

onLoad: 函数() {

console.log('onLoad')

var that = this

//调用应用实例的方法获取全局数据

app.getUserInfo(function(userInfo){

//更新数据

那个.setData({

用户信息:用户信息

})

})

}

网站前端程序制作开发策划_小程序开发制作_微信小程序怎么开发

})

index.wxss 是页面的样式表:

/**index.wxss**/

.userinfo {

显示:弹性;

弹性方向:列;

对齐项目:居中;

}

.userinfo-头像{

宽度:128rpx;

高度:128rpx;

边距:20rpx;

边框半径:50%;

}

.userinfo-昵称 {

颜色:#aaa;

}

.usermotto {

上边距:200px;

}

页面的样式表不是必需的。当存在页面样式表时,页面样式表中的样式规则将层叠在 app.wxss 中的样式规则之上。如果不指定页面的样式表,也可以直接在页面的结构文件中使用app.wxss中指定的样式规则。

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

页面的配置文件不是必需的。当页面有配置文件时小程序开发制作,页面中的配置项会覆盖app.json窗口中相同的配置项。如果没有指定页面配置文件,页面直接使用app.json中的默认配置。

日志的页面结构

【昱远信息系统开发定制】

本站声明: 本文章内容来源于互联网,文章内容仅供用户参考。本公司不能完全保证文章内容的准备性、时效性。如果因本文章对用户造成了任何损失或者损害,本公司将不会承担任何法律责任。如果涉及到版权问题,请提交到wikins@nbyuyuan.com

  • 立即与昱远顾问通话
    电话咨询
  • 在线咨询
  • 扫一扫添加微信
    微信咨询
  • 与昱远顾问QQ咨询
    QQ咨询