微信小程序-全局配置、组件、页面跳转、用户信息等

全局配置

三个页面

app.json pages字段

"pages":[
    "pages/index/index", # 首页
    "pages/home/home",  # 我的
    "pages/party/party" # 活动
  ]

window字段

这好看不好看 得css的人来配。

"window":{
    "backgroundTextStyle":"light",
    "navigationBarBackgroundColor": "#B22222", # 最上面的颜色
    "navigationBarTitleText": "怀庄酒业", # 上面的标题
    "navigationBarTextStyle":"black" # 文字颜色
  }

tabBar字段

就是下方的菜单

注意：这里引用的pathPath一定要在Pages字段里。

"tabBar": {
      "list": [
        {
          "pagePath": "pages/index/index",
          "text": "首页",
          "iconPath": "static/tabbar/ic_menu_choice_nor.png",
          "selectedIconPath": "static/tabbar/ic_menu_choice_pressed.png"
        },
        {
            "pagePath": "pages/party/party",
            "text": "活动",
            "iconPath": "static/tabbar/ic_menu_party_nor.png",
            "selectedIconPath": "static/tabbar/ic_menu_party_pressed.png"
        },
        {
            "pagePath": "pages/home/home",
            "text": "我的",
            "iconPath": "static/tabbar/ic_menu_me_nor.png",
            "selectedIconPath": "static/tabbar/ic_menu_me_pressed.png"
        }
    ]
  }

效果如下

组件

• text: 文本信息
• view: 容器，类似div
• image: 图片

跳转

对标签绑定点击事件

part.wxml

<text>活动页面</text>
<button  bindtap="clickMeToSignUp"> 我要报名 </button>

part.js

clickMeToSignUp:function(){
        console.log("点击跳转到报名页")
        wx.navigateTo({
            url: '/pages/signup/signup'
        })
}

数据绑定

都是双向绑定

part.wxml

<text bindtap="changeLogin"> {{ isLogin }}</text>

part.js

data: {
        isLogin: false
},
changeLogin: function(){
      this.setData({isLogin: !isLogin})
}

获取用户信息

index.wxml

<view  class="container">
  <view class="userinfo">
    <block wx:if="{{!hasUserInfo}}">
      <button wx:if="{{canIUseGetUserProfile}}"  bindtap="getUserProfile" > 授权登录 </button>
      <button wx:else open-type="getUserInfo" bindgetuserinfo="getUserInfo"> 获取头像昵称 </button>
    </block>
  </view>
</view>

index.js

data: {
      userInfo: {},
      hasUserInfo: false,
      canIUseGetUserProfile: false,
    },
onLoad(options) {
      if (wx.getUserProfile) {
        console.log("onload")
        this.setData({
          canIUseGetUserProfile: true
        })
      }
    },
getUserProfile() {
      console.log("getUserprofile")
      // 推荐使用 wx.getUserProfile 获取用户信息，开发者每次通过该接口获取用户个人信息均需用户确认
      // 开发者妥善保管用户快速填写的头像昵称，避免重复弹窗
      wx.getUserProfile({
        desc: '用于完善会员资料', // 声明获取用户个人信息后的用途，后续会展示在弹窗中，请谨慎填写
        success: (res) => {
          this.setData({
            userInfo: res.userInfo,
            hasUserInfo: true
          })
          console.log(res.userInfo)
          console.log(this.data.userInfo) //获取data里的数据  this.data.xxx
        }
      })
    },

效果如下





但是 界面显示很难看。

获取用户位置信息

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

注意这里需要将this 赋值给that.

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

提示要在app.json 配置permission字段,参考 小程序全局配置https://developers.weixin.qq.com/miniprogram/dev/reference/configuration/app.html



app.json

"permission": {
        "scope.userLocation": {
          "desc": "你的位置信息将用于小程序位置接口的效果展示"
        }
    }

效果如下

for指令

<view wx:for="{{dataList}}"> {{index}} - {{item}} </view>

效果如下

上传图片

uploadImage: function(){
      var that = this;
      wx.chooseImage({
        count: 5,
        sizeType: ['original', 'compressed'],
        success:function(res){
          that.setData({
            imageList: res.tempFilePaths
          })
        }
      })
    },

效果如下

数据双向绑定

<view>手机号：{{telphone}}</view>
<input value="{{telphone}}" bindinput="bindPhone" placeholder="请输入手机号"></input>

data: {
      telphone: "12213123"
    },
bindPhone: function(e){
      console.log(1);
      this.setData({
        telphone: e.detail.value
      })
    },

效果如下