微信小程序云开发1

微信小程序云开发

1. 在app.json中进行全局配置

   1. 参考文档

   ​ https://developers.weixin.qq.com/miniprogram/dev/reference/configuration/app.html

   2. pages属性

      配置页面，在根目录下的pages下新建文件夹再新建页面，在app.js中会自动配置，这点很方便

   3. window全局配置

      <!-->主体颜色<-->
      "backgroundColor": "#F6F6F6",
      <!-->主体背景色<-->
      "backgroundTextStyle": "light",
      <!-->头部导航栏颜色<-->
      "navigationBarBackgroundColor": "#937bf5",
      <!-->头部标题<-->
      "navigationBarTitleText": "喵喵的猫星人",
      <!-->头部标题字体颜色<-->
      "navigationBarTextStyle": "white"
      

   4. tabBar底部导航栏配置

      "tabBar": {
      	<!-->字体默认颜色<-->
          "color": "#b4b5b6",
      	<!-->被选中的字体颜色<-->
          "selectedColor": "#937bf5",
          "list": [
            {
      		<!-->底部的默认图标<-->
              "iconPath": "images/tabbar/首页.png",
      		<!-->被选中后的图标<-->
              "selectedIconPath": "images/tabbar/首页_active.png",
      		<!-->绑定在pages中的的页面<-->
              "pagePath": "pages/index/index",
      		<!-->页面标题<-->
              "text": "首页"
            },
      

2. 首页布局以及样式编写

   1. index.wxml

   <!--miniprogram/pages/index/index.wxml-->
   <!-->
   indicator_dots:是否出现小圆点
   autoplay:是否自动轮播
   wx：for  绑定index.js 中data的数据
   circular：轮播图滑动衔接
   <-->
   <!--<!--miniprogram/pages/index/index.wxml-->
   <view class="index">
     <!-- 轮播图 -->
     <swiper class="index-swiper" indicator-dots="{{true}}"
           autoplay="{{true}}" circular="{{true}}">
           <block wx:for="{{imgUrls}}" wx:key="index">
             <swiper-item>
               <image src="{{item}}" class="swiper-item" width="355" hight="150"/>
             </swiper-item>
           </block>
         </swiper>
       <!--标题  -->
       <view class="index-tab">
         <view class="active">推荐</view>
         <view >最新</view>
       </view>
       <!--图片 -->
       <view class="index-list">
         <view class="index-list-item">
           <image src="../../images/photo/01.jpg"></image>
           <view class="index-list-text">
             <text>小猫咪</text>
             <text>
               <text class="iconfont icondianzan"></text>
               <text>100</text>
             </text>
           </view>
         </view>
         <view class="index-list-item">
           <image src="../../images/photo/01.jpg"></image>
           <view class="index-list-text">
             <text>小猫咪</text>
             <text>
               <text class="iconfont icondianzan"></text>
               <text>100</text>
             </text>
           </view>
         </view>
         <view class="index-list-item">
           <image src="../../images/photo/01.jpg"></image>
           <view class="index-list-text">
             <text>小猫咪</text>
             <text>
               <text class="iconfont icondianzan"></text>
               <text>100</text>
             </text>
           </view>
         </view>
         <view class="index-list-item">
           <image src="../../images/photo/01.jpg"></image>
           <view class="index-list-text">
             <text>小猫咪</text>
             <text>
               <text class="iconfont icondianzan"></text>
               <text>100</text>
             </text>
           </view>
         </view>
       </view>
   </view>
   
   

   2. index.js

      Page({
      
        /**
         * 页面的初始数据
         */
        data: {
         imgUrls:[
            '../../images/photo/01.jpg',
            '../../images/photo/02.jpg',
            '../../images/photo/03.jpg',
          ],
        },
      

   3. index.wxss

      /* miniprogram/pages/index/index.wxss */
      /* 轮播图样式 */
      .index-swiper{margin:20rpx;border-radius:10px; overflow:hidden;}
      .index-swiper image{width:100%; border-radius:10px; overflow:hidden;}
      /* 标题样式 */
      .index-tab{display: flex;}
      .index-tab view{flex :1; text-align: center; padding: 10rpx; margin:10px;}
      .index-tab view.active{border-bottom:1px red solid; color: red;}
      /* 标题下面的图片样式 */
      .index-list{display: flex; flex-wrap:wrap; color:hotpink;}
      .index-list-item{width: 50%; margin: 10rpx 0;}
      .index-list-item image{width:90%; border-radius: 10px; height:250rpx; margin: 0 auto;display:block;}
      /* 图片下面的名称点赞样式，文本必须有宽,justify-content:space-between两端点对齐 */
      .index-list-text{width: 90%; margin: 0 auto; display: flex; justify-content:space-between;}
      
      

   4. 保持横纵比缩放图片

   ​ mode = “aspectFill”

3. user页面编写(完成用户登陆)

   1. 修改开发页面

      1. 模拟器选中user页面
      2. 打开编译—>编译模式–>启动页面–>修改为user

   2. user.wxml

      <!--miniprogram/pages/user/user.wxml-->
      <view class="user">
        <view class="user-info">
          <image src="{{userPhoto}}" />
          <!-- 需要使用 button 来授权登录 -->
          <text wx:if="{{logged}}"> 欢迎你：{{nickname}}</text>
          <!-- bindgetuserinfo函数需要卸载js中 -->
          <button wx:else open-type="getUserInfo" bindgetuserinfo="bindGetUserInfo">
            微信登录
          </button>
        </view>
      </view>
      
      

   3. user.js

      // miniprogram/pages/user/user.js
      //创建数据库,初始化数据库
      const db = wx.cloud.database()
      
      Page({
      
        /**
         * 页面的初始数据
         */
        data: {
          userPhoto:"../../images/photo/01.jpg",
          nickname:"小喵喵",
          logged:false,
        },
       // 返回 登陆信息，返回userinfo,插入数据库
        bindGetUserInfo(ev){
          // console.log(ev);
          let userInfo = ev.detail.userInfo;
          if (!this.data.logged && userInfo){
              db.collection('users').add({
                data:{
                  userPhoto:userInfo.avatarUrl,
                  nickName:userInfo.nickName,
                  signature:'',
                  phoneNumber:'',
                  weixinNumber:'',
                  links:0,
                  time:new Date()
                }
              }).then((res)=>{
                console.log(res)
              });
            }
          }
      })
      

   4. user.wxss

      /* miniprogram/pages/user/user.wxss */
      .user-info{display: flex; align-items: center; height:150rpx;border:1px #b4b5b6 solid;border-left: none;border-right: none;}
      .user-info image{width: 100rpx;height: 100rpx;border-radius: 50%;overflow: hidden;}
      .user-info text{margin-left: 10rpx;}
      .user-info button{margin: 0;}
      

   5. app.js

      //app.js
      App({
        //初始化生命周期
        onLaunch: function () {
          
          if (!wx.cloud) {
            console.error('请使用 2.2.3 或以上的基础库以使用云能力')
          } else {
            wx.cloud.init({
              // env 参数说明：
              //   env 参数决定接下来小程序发起的云开发调用（wx.cloud.xxx）会默认请求到哪个云环境的资源
              //   此处请填入环境 ID, 环境 ID 可打开云控制台查看
              //   如不填则使用默认环境（第一个创建的环境）
              // env: 'my-env-id',
              //配置云开发环境id
              env:'dev-2gzx8hmu754cbff6',
              //追踪用户调用（在运营分析，用户访问中可以看到）
              traceUser: true,
              
            })
          }
      
          this.globalData = {}
        }
      })