• 设为首页
  • 点击收藏
  • 手机版
    手机扫一扫访问
    迪恩网络手机版
  • 关注官方公众号
    微信扫一扫关注
    公众号

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

原作者: [db:作者] 来自: [db:来源] 收藏 邀请

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

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: "litiyuivu",

email: "[email protected]"

},

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: "litiyuivu",

email: "[email protected]"

},

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文件夹里 调用,编译 就行了。

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

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

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

 

 


鲜花

握手

雷人

路过

鸡蛋
该文章已有0人参与评论

请发表评论

全部评论

专题导读
上一篇:
【小程序】配置接口服务器发布时间:2022-07-18
下一篇:
微信扫一扫登录(使用小程序实现) - 李泽泽发布时间:2022-07-18
热门推荐
阅读排行榜

扫描微信二维码

查看手机版网站

随时了解更新最新资讯

139-2527-9053

在线客服(服务时间 9:00~18:00)

在线QQ客服
地址:深圳市南山区西丽大学城创智工业园
电邮:jeky_zhao#qq.com
移动电话:139-2527-9053

Powered by 互联科技 X3.4© 2001-2213 极客世界.|Sitemap