加入收藏 | 设为首页 | 会员中心 | 我要投稿 李大同 (https://www.lidatong.com.cn/)- 科技、建站、经验、云计算、5G、大数据,站长网!
当前位置: 首页 > 综合聚焦 > 资源网站 > 资源 > 正文

1.1 微信小程序--我的第一个小程序

发布时间:2020-12-14 20:27:07 所属栏目:资源 来源:网络整理
导读:首先应该是小程序的注册,注册只要一次,后面又不需要注册了,网上也有很多介绍,下面说有用的。 1.开发常用快捷键(必须都背下来) Ctrl+S:保存 ??Ctrl+C:复制选中的 ? ?Ctrl+V:粘贴 ? Ctrl+X:剪切选中的 ?? ?? Ctrl+home:移到文件开头 ??Ctrl+end:移

<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;">app.js</td>
<td style="text-align:center;"></td>
<td style="text-align:center;">小程序逻辑</td>
</tr>
<tr>
<td style="text-align:center;">app.json</td>
<td style="text-align:center;"></td>
<td style="text-align:center;">小程序公共设置</td>
</tr>
<tr>
<td style="text-align:center;">app.wxss</td>
<td style="text-align:center;">否</td>
<td style="text-align:center;">小程序公共样式表</td>
</tr>

一个小页面由 4 个文件组成,分别是:

<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}}??????????????????????????//显示内容,第一个view后面可以设显示属性

介绍:{{intro}}

=手机:{{contact}}??//设置为按钮,点击可打电话,跳转到callme函数,在.js文件里调用

地址: {{address}}

微信号:{{wechat}}

邮箱:{{email}}

app.json

{

:[

,

:{

:,

:

},

: {

: [

????{

: ,????//路径

: ,????????????????????????//名称

:,??????????????//图片路径

:

},

:

}

]

}

}

4.前3个代码放到对应的文件里编译 就行了。

主页没任何东西,点击不显示任何东西。

点击我的手机号码可以拨打我的电话。

这样一个展示的小程序就完成了。

(编辑:李大同)

【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容!

首先应该是小程序的注册,注册只要一次,后面又不需要注册了,网上也有很多介绍,下面说有用的。

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;">

    推荐文章
      热点阅读