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 个文件组成，必须放在项目的根目录，如下：

文件	是否必须有？	作用
app.js	是	小程序逻辑
app.json	是	小程序公共设置
app.wxss	否	小程序公共样式表

一个小页面由 4 个文件组成，分别是：

 

文件类型	是否必须有？	作用
.js	是	页面逻辑
.wxml	是	页面结构
.wxss	否	页面样式表
.json	否	页面配置

注：每个小页面的 4 个文件必须具有相同的路径与文件名。

如下图（简单展示）：

 

文件目录（这些都包含在你工程文件夹下，加粗表示文件夹，我的工程文件夹下是 me）：

 

第一级	images	pages	app.json
第二级	.png等图	aboutme home
第三级		aboutme.js  aboutme.wxml 无

 

工具：微信开发者工具

 

3.直接 给3个文件的代码，放到对应的文件里面，没给的可不用代码也行：

（里面不能有任何注释，后面单独列出的 注释仅供理解，先给出完整代码）

 

1. aboutme.js

//获取应用实例

var app = getApp()

Page({

data: {

img: '/images/1.png',

title: "iamtiyu",

intro: "我是tiyu，人，男，嗯",

contact: "188****3295",

address: "安徽省芜湖市 万达广场",

wechat: "litiyu***",

email: "528132233@qq.com"

},

callme: function () {

wx.makePhoneCall({

phoneNumber: this.data.contact

})

}

})

 

 

2. aboutme.wxml

<view><image src="{{img}}" ></image></view>

<view>{{title}}</view>

<view>介绍：{{intro}}</view>

<view bindtap='callme'>手机：{{contact}}</view>

<view>地址: {{address}}</view>

<view>微信号：{{wechat}}</view>

<view>邮箱：{{email}}</view>

 

 

3. app.json

{

"pages":[

"pages/aboutme/aboutme",

"pages/home/home"

],

"window":{

"backgroundTextStyle":"light",

"navigationBarBackgroundColor": "#fff",

"navigationBarTitleText": "第一个小程序",

"navigationBarTextStyle":"black", 

    "enablePullDownRefresh": true

},

"tabBar": {

"list": [

{

"pagePath": "pages/aboutme/aboutme",

"text": "关于我",

"iconPath":"images/1.png",

"selectedIconPath":"images/2.png"

},

{

"pagePath": "pages/home/home",

"text": "主页",

"iconPath": "images/1.png",

"selectedIconPath": "images/2.png"

}

]

}

}

 

注释版（仅供理解），看懂代码，知道这些代码是干嘛的：

 

aboutme.js

//获取应用实例

var app = getApp()

Page({

data: {

img: '/images/1.png',

title: "iamtiyu",

intro: "我是tiyu，人，男，嗯",

contact: "188****3295",

address: "安徽省芜湖市 万达广场",

wechat: "litiyu***",

email: "528132233@qq.com"

},

callme: function () {

wx.makePhoneCall({                           //调用打电话函数

phoneNumber: this.data.contact            //号码，调用data数组了的：contact

})

}

})

 

 

 

aboutme.wxml

<view><image src="{{img}}" ></image></view>     //以{{对应文件.js里data数组名直接代替内容}}，方便后续更改内容

<view>{{title}}</view>                          //<view>显示内容</view>,第一个view后面可以设显示属性

<view>介绍：{{intro}}</view>

<view bindtap='callme'>手机：{{contact}}</view>  //设置为按钮，点击可打电话，跳转到callme函数，在.js文件里调用

<view>地址: {{address}}</view>

<view>微信号：{{wechat}}</view>

<view>邮箱：{{email}}</view>

 

 

app.json

{

"pages":[ /*所有页面都在此注册*/

"pages/aboutme/aboutme",

"pages/home/home"

],

"window":{ /*上导航栏设置*/

"backgroundTextStyle":"light",

"navigationBarBackgroundColor": "#fff",

"navigationBarTitleText": "第一个小程序",

"navigationBarTextStyle":"black", 

    "enablePullDownRefresh": true            //允许页面下拉

},

"tabBar": {

"list": [ /*以数组列出底部标签栏，最少两个标签*/

    {

"pagePath": "pages/aboutme/aboutme",    //路径

"text": "关于我",                        //名称

"iconPath":"images/1.png",              //图片路径

"selectedIconPath":"images/2.png"       //选中后变换图片的路径

},

{

"pagePath": "pages/home/home",

"text": "主页",

"iconPath": "images/1.png",

"selectedIconPath": "images/2.png"

}

]

}

}

 

4.前3个代码放到对应的文件里，还有图片放到images文件夹里 调用，编译 就行了。

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

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

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