如何开发⼀个个⼈⼩程序，⼩程序开发⼊门教程
做任何程序开发要⾸先到其官⽅⽂档，我们先来看看其有哪些官⽅⽂档。
这⾥就是做⼩程序开发的全部官⽅⽂档。
知道了⽂档的位置，下⾯我们来介绍下如何做⼀个⼩程序开发：
第⼀步：
下载⼩程序开发者⼯具并安装，下载路径：
进到下载界⾯后，根据⾃⼰的操作系统选择相应的链接进⾏下载，下载完成后进⾏安装。
第⼆步：登录⼯具
开发者⼯具安装完成后我们就可以将其打开，初次打开会需要⽤扫码登录，⼊下图，⽤⼿机扫⼀扫后确认登录就可以了。
第三步：创建⼀个项⽬
登录成功后，如果是第⼀次使⽤该⼯具会弹出创建项⽬的窗⼝，如下图：
在创建过程中，如果选择的本地⽂件夹是个空⽂件夹会出来⼀个勾选项“在当前⽬录中创建quick start项⽬”，为⽅便初学者了解⼩程序的基本代码结构，请勾选此项，勾选后，开发者⼯具会帮助我们在开发⽬录⾥⽣成⼀个简单的 demo，如下图：
第四步：项⽬代码结构解释
点击开发者⼯具左侧导航的“编辑”，我们可以看到这个项⽬，已经初始化并包含了⼀些简单的代码⽂件。最关键也是必不可少的，是app.js、app.json、app.wxss 这三个。其中，.js后缀的是脚本⽂件，.json后缀的⽂件是配置⽂件，.wxss后缀的是样式表⽂件。⼩程序会读取这些⽂件，并⽣成⼩程序实例。
下⾯我们简单了解这三个⽂件的功能，⽅便修改以及从头开发⾃⼰的⼩程序。
1、app.js是⼩程序的脚本代码。我们可以在这个⽂件中监听并处理⼩程序的⽣命周期函数、声明全局变量。调⽤框架提供的丰富的 API，如本例的同步存储及同步读取本地数据。
2、app.json 是对整个⼩程序的全局配置。我们可以在这个⽂件中配置⼩程序是由哪些页⾯组成，配置⼩程序的窗⼝背景⾊，配置导航条样式，配置默认标题。注意该⽂件不可添加任何注释。
3、app.wxss 是整个⼩程序的公共样式表。我们可以在页⾯组件的 class 属性上直接使⽤ app.wxss 中声明的样式规则。
我们注意到，在实例程序的代码中还有2个⽂件夹，⼀个是pages,⼀个是utils，其中utils是放通⽤⼯具类⽅法的⼀个⽂件夹，pages是存放所有页⾯的⽂件夹。我们着重讲⼀下这个pages.
第五步：⼩程序页⾯⽂件构成
在这个⽰例中，我们有两个页⾯，index 页⾯和 logs 页⾯，即欢迎页和⼩程序启动⽇志的展⽰页，他们都在 pages ⽬录下。⼩程序中的每⼀个页⾯的【路径+页⾯名】都需要写在 app.json 的 pages 中，且 pages 中的第⼀个页⾯是⼩程序的⾸页。
每⼀个⼩程序页⾯是由同路径下同名的四个不同后缀⽂件的组成，如：index.js、index.wxml、index.wxss、index.json。.js后缀的⽂件是脚本⽂件，.json后缀的⽂件是配置⽂件，.wxss后缀的是样式表⽂件，.wxml后缀的⽂件是页⾯结构⽂件。
index.wxml 是页⾯的结构⽂件：
<!--index.wxml-->
<view class="container">
<view  bindtap="bindViewTap" class="userinfo">
<image class="userinfo-avatar" src="{{userInfo.avatarUrl}}" background-size="cover"></image>
<text class="userinfo-nickname">{{userInfo.nickName}}</text>
</view>
<view class="usermotto">
<text class="user-motto">{{motto}}</text>
</view>
</view>
本例中使⽤了、、 来搭建页⾯结构，绑定数据和交互处理函数。
index.js 是页⾯的脚本⽂件，在这个⽂件中我们可以监听并处理页⾯的⽣命周期函数、获取⼩程序实例，声明并处理数据，响应页⾯交互事件等。
//index.js
//获取应⽤实例
var app = getApp()
Page({
data: {
motto: 'Hello World',
userInfo: {}
},
//事件处理函数
bindViewTap: function() {
wx.navigateTo({
url: '../logs/logs'
})
},
onLoad: function () {
console.log('onLoad')
var that = this
//调⽤应⽤实例的⽅法获取全局数据
//更新数据
that.setData({
userInfo:userInfo
})
})
}
})
index.wxss 是页⾯的样式表：
写文章的小程序
/**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;
}
页⾯的样式表是⾮必要的。当有页⾯样式表时，页⾯的样式表中的样式规则会层叠覆盖 app.wxss 中的样式规则。如果不指定页⾯的样式表，也可以在页⾯的结构⽂件中直接使⽤ app.wxss 中指定的样式规则。
index.json 是页⾯的配置⽂件：
页⾯的配置⽂件是⾮必要的。当有页⾯的配置⽂件时，配置项在该页⾯会覆盖 app.json 的 window 中相同的配置项。如果没有指定的页⾯配置⽂件，则在该页⾯直接使⽤ app.json 中的默认配置。
logs 的页⾯结构
<!--logs.wxml-->
<view class="container log-list">
<block wx:for-items="{{logs}}" wx:for-item="log">
<text class="log-item">{{index + 1}}. {{log}}</text>
</block>
</view>
logs 页⾯使⽤ 控制标签来组织代码，在 上使⽤ wx:for-items 绑定 logs 数据，并将 logs 数据循环展开节点
//logs.js
var util = require('../../utils/util.js')
Page({
data: {
logs: []
},
onLoad: function () {
this.setData({
logs: (wx.getStorageSync('logs') || []).map(function (log) {
return util.formatTime(new Date(log))
})
})
}
})

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。