小白初入微信小程序开发(一)

550 查看

开发工具:


FEF6E576-5520-401C-B59F-E741FB882AEE.png


下载地址(里面有mac和windows的,mac版的没有网好像就用不了还一直弹网络错误,只能强制退出,windows版本的没网也能用。针对mac版本没网不能用要给差评):微信小程序开发工具
开发文档:官方简易教程以及框架组件API文档

今天尝试着弄了下,没有做到面面俱到,网上很多人都已经做了完整的小程序了,而我这个顶多是个demo,人比较笨,但是笨鸟也要飞,也得学,慢慢来嘛!
如图:

![Uploading 347EE33B-FE8C-44C0-A688-5A69B8C812F3_245844.png . . .]

通过此文你将知道开发微信小程序时怎么进行页面跳转、弹出框、设置顶部导航栏、(.js、.json和.wxml和.wxss文件分别做什么事以及他们的关联)、底部菜单栏等等功能。

1.设置底部菜单:
在app.json文件中添加tabBar节点,如果新建项目的话,是没有的,需要自己手动添加。注意:实际上项目中是不能写注释的哈。下面有注释,方便这里阅读。保证写完之后这个.json文件里面的内容是json格式。

"tabBar": {
"color": "#9f9f9f",//默认颜色
"selectedColor": "#95BB57",
"borderStyle": "white",//菜单栏上面的一条线,默认是black,黑的
"backgroundColor": "#F8F8F8",
"list": [{//这个list就是下面的各个菜单,按先后顺序来的,如果不设置pagePath的话,运行的时候回报错,但也能跑。不设置iconPath的话,菜单栏的高度会比正常的要矮一些。这里要注意的是pagePath的值要在这个json文件的pages节点里注册。
  "pagePath": "pages/home/index",
  "iconPath": "images/A-home@2x.png",
  "selectedIconPath": "images/B-home@2x.png",
  "text": "首页"
}, {
  "pagePath": "pages/xcfw/xcfw",
  "iconPath": "images/A-xcfw@2x.png",
  "selectedIconPath": "images/B-xcfw@2x.png",
  "text": "行程"
},{
  "pagePath": "pages/kf/kf",
  "iconPath": "images/A-kf@2x.png",
  "selectedIconPath": "images/B-kf@2x.png",
  "text": "客服"     
},{
  "pagePath": "pages/my/my",
  "iconPath": "images/A-my@2x.png",
  "selectedIconPath": "images/B-my@2x.png",
  "text": "我的"
}]

}

2.设置顶部导航栏
首先需要将页面创建好,并在app.json中注册页面。


ED46EDD9-D5A6-439D-B9A6-161512C6B144.png


分别创建js、json、wxml和wxss文件。这里就要各个文件的作用了,wxml文件负责界面显示,布局代码都放在这里面。wxss文件就相当于css文件了,样式文件,里面写样式代码。json文件里面可以写一些配置相关的代码,比如设置该页面的标题啊返回按钮什么的。js文件负责逻辑,比如界面上按钮点击事件,加载网络什么的,很强!

同样是在app.json里面设置顶部导航栏的相关属性,很简单,添加一个window节点,并配置下面几个值就可以设置一个简单的带标题的导航栏了。

//设置顶部导航栏
"window":{
"backgroundTextStyle":"light",
"navigationBarBackgroundColor": "#44c296",
"navigationBarTitleText": "spring3g",   
"navigationBarTextStyle":"white"

}

3.页面跳转,关键代码wx.navigateTo({url:url})
举个例子,比如我点击头像,跳转到日志页面。

index.wxml文件里面布局代码,给头像的框绑定事件: bindtap='bindViewTap'

<view bindtap="bindViewTap" class="userinfo">
      <image class="userinfo-avatar" src="{{userInfo.avatarUrl}}" background-size="cover"></image>
<text class="userinfo-nickname">{{userInfo.nickName}}</text>

</view>

再到index.js文件里的Page()里面写事件处理逻辑,../表示当前index.js所在文件夹目录的上级目录。意思就是说,我要去的页面是在index.js文件的上层目录的logs目录下的logs文件.

  Page({  
      //事件处理函数
      bindViewTap: function() {
          wx.navigateTo({
          url: '../logs/logs'
      })
  })}

4.弹出框,这个比较坑,我开始以为是直接在js文件里面写个什么alert啊confirm之类的方法就能调出来。可实际上不是哈!
首先,在wxml里面需要写如下代码,{{title}}会从js文件里面的Page里面的data节点去获取键为title的值来显示,这里也可以直接是字符串。

 <modal title="{{title}}" confirm-text="{{ok}}" cancel-text="{{cancel}}" hidden="{{modalHidden}}" bindconfirm="modalChange" bindcancel="modalChange">
        {{modalText1}}
 </modal>
 <view class="btn-area">
        <button type="default" bindtap="modalTap">{{abcd}}</button>    
 </view>

然后在js里面写上对应的方法,类似事件处理一样一样的。modalChange处理弹出匡。需要注意的是,modalHidden如果不在js里的Page里面的data里面设置为true的话,页面加载的时候这个框就会弹出来。modalTap事件里面设置modalHidden为false,那么modalChange事件里面就很好处理了:设置modalHidden为true就可以了。

modalTap: function(e) {
    this.setData({
       modalHidden: false
    })
},
modalChange: function(e) {
     this.setData({
        modalHidden: true
     })
}

如果你有html开发经验,那你就写个css必定。上手小程序布局也应该会很快的。如果没有相关经验,没关系,这个其实挺简单的。

这个是我花了两个多小时从小白到能上手的一个demo截图。


gggg.gif

2018 - 知识虫 - 我的知识库 渝ICP备16002641号-2

渝公网安备 50010702501581号