1.1 微信小程序--我的第一个小程序
首先应该是小程序的注册,注册只要一次,后面又不需要注册了,网上也有很多介绍,下面说有用的。 1.开发常用快捷键(必须都背下来) Ctrl+S:保存 ??Ctrl+C:复制选中的 ? ?Ctrl+V:粘贴 ? Ctrl+X:剪切选中的 ?? ?? Ctrl+home:移到文件开头 ??Ctrl+end:移到文件结尾?? Ctrl+F:页面内搜关键字? ?Ctrl+P:全局搜源文件名(按esc可退出)? Ctrl+Shift+F:全局关键字搜索(注意:可能会与输入法的快捷键冲突,取消其他的快捷键就行了) 2.文件结构 ? 小程序包含一个描述整体程序的app 和多个描述各自页面的page 。 一个小程序主题部分由 3 个文件组成,必须放在项目的根目录,如下: <table border="1" cellpadding="1" cellspacing="1" style="width:200px;"> |
<table border="1" cellpadding="1" cellspacing="1" style="width:200px;">
<tr>
<td style="text-align:center;">文件类型</td>
<td style="text-align:center;">是否必须有?</td>
<td style="text-align:center;">作用</td>
</tr>
<tr>
<td style="text-align:center;">.js</td>
<td style="text-align:center;">是</td>
<td style="text-align:center;">页面逻辑</td>
</tr>
<tr>
<td style="text-align:center;">.wxml</td>
<td style="text-align:center;">是</td>
<td style="text-align:center;">页面结构</td>
</tr>
<tr>
<td style="text-align:center;">.wxss</td>
<td style="text-align:center;">否</td>
<td style="text-align:center;">页面样式表</td>
</tr>
<tr>
<td style="text-align:center;">.json</td>
<td style="text-align:center;">否</td>
<td style="text-align:center;">页面配置</td>
</tr> 注:每个小页面的 4 个文件必须具有相同的路径与文件名。
如下图(简单展示):
文件目录(这些都包含在你工程文件夹下,加粗表示文件夹,我的工程文件夹下是 me):
<table border="1" cellpadding="1" cellspacing="1" style="width:200px;">
<tr>
<td>第一级</td>
<td>images</td>
<td>pages</td>
<td>app.json</td>
</tr>
<tr>
<td>第二级</td>
<td>.png等图</td>
<td>?
<table border="1" cellpadding="1" cellspacing="1" style="width:200px;"><tr>
<td>aboutme</td>
<td>home</td>
</tr></table>
</td>
<td>?</td>
</tr>
<tr>
<td>第三级</td>
<td>?</td>
<td>
<table border="1" cellpadding="1" cellspacing="1" style="width:200px;"><tr>
<td>
aboutme.js?
aboutme.wxml
工具:微信开发者工具3.直接 给3个文件的代码,放到对应的文件里面,没给的可不用代码也行:
1. aboutme.js
app = getApp()
Page({
data: {
img: ,
title: ,
intro: ,
contact: ,
address: ,
wechat: ,
email:
},
callme: () {
wx.makePhoneCall({
phoneNumber: .data.contact
})
}
})
2. aboutme.wxml
< =
{{title}}
介绍:{{intro}}
=手机:{{contact}}
地址: {{address}}
微信号:{{wechat}}
邮箱:{{email}}
3. app.json
{
:[
,
],
:{
:,
: ,
: ,
:
:
},
: {
: [
{
: ,
: ,
:,
:
},
{
: ,
: ,
: ,
:
}
]
}
}
看懂代码,知道这些代码是干嘛的:
aboutme.js
app = getApp()
Page({
data: {
img: ,
callme: () {
wx.makePhoneCall({???????????????????????????//调用打电话函数
phoneNumber: .data.contact????????????//号码,调用data数组了的:contact
})
}
})
aboutme.wxml
< = ????//以{{对应文件.js里data数组名直接代替内容}},方便后续更改内容
{{title}}??????????????????????????//
介绍:{{intro}}
=手机:{{contact}}??//设置为按钮,点击可打电话,跳转到callme函数,在.js文件里调用
地址: {{address}}
微信号:{{wechat}}
邮箱:{{email}}
app.json
{
:[
,
:{
:,
:
},
: {
: [
????{
: ,????//路径
: ,????????????????????????//名称
:,??????????????//图片路径
:
},
:
}
]
}
}
4.前3个代码放到对应的文件里,编译 就行了。
主页没任何东西,点击不显示任何东西。
点击我的手机号码可以拨打我的电话。
这样一个展示的小程序就完成了。
(编辑:李大同)
【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容!