怪兽和他的朋友们

Monster

0%

mini

发表于 更新于
本文字数： 5.7k 阅读时长 ≈ 5 分钟

开发小程序

3.1 全局配置

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
{
  "pages": [
    "pages/index/index",
    "pages/home/home"
  ],
  "window": {
    "navigationBarBackgroundColor": "#FFDAB9",
    "navigationBarTextStyle": "black",
    "navigationBarTitleText": "李业"
  },
  "tabBar": {
    "selectedColor":"#CD5C5C",
    "list": [
      {
        "pagePath": "pages/index/index",
        "text": "首页",
        "iconPath": "static/tabbar/ic_menu_choice_nor.png",
        "selectedIconPath": "static/tabbar/ic_menu_choice_pressed.png"
      },
      {
        "pagePath": "pages/home/home",
        "text": "我的",
        "iconPath": "static/tabbar/ic_menu_me_nor.png",
        "selectedIconPath": "static/tabbar/ic_menu_me_pressed.png"
      }
    ]
  }
}

1578276316658

3.2 组件

  • text: 编写文本信息，类似于 span 标签；

  • view: 容器，类似于 div 标签；

  • image: 图片。

3.3 样式

像素：

  • px: 固定像素；
  • rpx: （建议）会根据屏幕自动适配，一个屏幕共 750rpx。

4.flex 布局 (css)

一种非常方便的布局方式。

在容器中记住 4 个样式即可。

1
2
3
4
display: flex;         // 使用 flex 布局
flex-direction: row;   // 规定主轴的方向：row/column
justify-content: space-around; // 元素在主轴方向上的排列方式: flex-start/flex-end/center/space-around/space-between
align-items: center;           // 元素在副轴方向上的排列方式: flex-start/flex-end/center/space-around/space-between

二、

1. 页面跳转

1、先在标签中绑定点击事件，固定格式：

  • bindtap 指定绑定哪个函数；
  • data-xxxxxx 传递参数。
1
<view bindtap="clickMe" data-nid="123" data-name="test123" >点我跳转</view>

2、在 .js 文件中写函数：

使用 dataset，可以获取传递的参数，是固定格式。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
Page({
  ...
  /**
   *  点击绑定的事件
  */
  clickMe: function (e) {
     var nid = e.currentTarget.dataset.nid;   // 使用 dataset，可以获取传递的参数
    var name = e.currentTarget.dataset.name;
    console.log(nid);  // 123
    console.log(name); // test123
    
    wx.navigateTo({   // 指定要跳转到哪个 url（wx 内置函数）注意：只能跳转到非 tabbar 的页面
      url: '/pages/redirect/redirect?id=' + nid + '&name=' + name    // 通过 query 继续传递参数
    });
  }
})

3、跳转后，目标页面如果想要继续接受参数，可以在 .js 文件中的 onLoad 方法中接收。

1
2
3
4
5
6
7
8
Page({
/**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {
    console.log(options); // {id: "123", name: "test123"}
  }
})

注意：默认只能跳转到非 tabbar 页面

另一种跳转方式：直接通过标签

1
<navigator url="/pages/redirect/redirect?id=666">跳转到新页面</navigator>

2. 数据绑定

显示

.wxml 中显示部分写法：

1
<view>数据1：{{message}}</view>

.js 中定义要展示的数据：

1
2
3
4
5
6
7
8
9
Page({

  /**
    * 页面的初始数据
    */
  data: {   // 必须在 data 中定义
    message: "沙雕李业",
  }
)}

数据更新

.wxml 中定义一个按钮：

1
2
3
<view>数据2：{{message}}</view>

<button bindtap="changeData">点击修改数据</button>

.js 中使用 setData 函数修改 data 中的数据（必须，不然前端不重新渲染）：

1
2
3
4
5
6
7
8
9
Page({
  data: {
    message:"沙雕李业",
  },
  changeData:function(){
    // 修改数据
    this.setData({ message: "大沙雕李业"});
  }
})

3.获取用户信息

.wxml 中：

1
2
3
4
5
6
7
8
9
<!--my/my.wxml-->
<text>猜猜我是谁？</text>
<view>{{name}}</view>
<view>
  <image src="{{avatar}}" style="height:200rpx;width:200rpx;"></image>
</view>

// 官方建议写法，会自动弹出授权提示；// 格式是固定的，fetchInfo 是自定义函数
<button open-type="getUserInfo" bindgetuserinfo="fetchInfo">登录查看答案</button>

.js 中：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
data: {
    'name': '',
    'avatar': ''
  },

fetchInfo: function () {
  let that = this;
  // 调用微信提供的接口获取用户信息
  wx.getUserInfo({
    success: function (res) {
      // 调用成功后触发
      console.log('success', res)
      that.setData({
        name: res.userInfo.nickName,
        avatar: res.userInfo.avatarUrl
      })
    },
    fail: function (res) {
      // 调用失败后触发
      console.log('fail', res)
    }
  })
},

手动唤醒授权页面的方法：

1
2
// 打开配置，手动授权。
wx.openSetting({})

4. 获取用户位置信息

.wxml 中：

1
<view bindtap="getLocalPath">{{localPath}}</view>

.js 中：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
data: {
    localPath: "请选择位置",
},

getLocalPath: function () {
  var that = this;
  wx.chooseLocation({
    success: function (res) {
      that.setData({
        localPath: res.address
      });
    },
  })
},

5. 微信的 for 指令

.wxml 中：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<text>商品列表</text>
<view>
  // 默认语法
  <view wx:for="{{dataList}}">{{index}} - {{item}}</view>
  // 自定义关键字
  <view wx:for="{{dataList}}" wx:for-index="idx" wx:for-item="x">{{idx}} - {{x}}</view>
</view>
<view>
  // 访问字典
  {{userInfo.name}}
  {{userInfo.age}}
</view>
<view>
  <view wx:for="{{userInfo}}">{{index}} - {{item}}</view>
</view>

.js 中：

1
2
3
4
5
6
7
data: {
  dataList: ["白浩为", "海狗", "常鑫"],
  userInfo: {
    name: "alex",
    age: 18
  }
},

6. 获取图片

.wxml 中：

1
2
3
4
<view bindtap="uploadImage">请上传图片</view>
<view class="container">
  <image wx:for="{{imageList}}" src="{{item}}"></image>
</view>

.js 中：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
data: {
  imageList: ["/static/hg.jpg", "/static/hg.jpg"]
},

uploadImage: function () {
  var that = this;

  wx.chooseImage({
    count: 9,
    sizeType: ['original', 'compressed'],   // 图片质量，原图还是压缩
    sourceType: ['album', 'camera'],    // 允许从哪里获取图片：相册、相机
    success: function (res) {
      // 设置 imageList 后，页面上图片会自动修改。

      // 用上传的图片覆盖现有的图片；
      that.setData({
        imageList: res.tempFilePaths
      });

      // 追加图片； 
      that.setData({
        imageList: that.data.imageList.concat(res.tempFilePaths)
      });
    }
  });
},

注意：图片目前只是上传到了内存。