小程序页面展示 @

小程序页面展示 

cmd命令创建数据库text

CREATE DATABASE text 
DEFAULT CHARACTER SET utf8    
DEFAULT COLLATE utf8_unicode_ci;

数据表   文章列表页

use text;
CREATE TABLE `texts` (
  `id` bigint(20) unsigned NOT NULL AUTO_INCREMENT,
  `name` varchar(100) COLLATE utf8mb4_unicode_ci NOT NULL DEFAULT '' COMMENT '文章名称',
  `pic` varchar(200) COLLATE utf8mb4_unicode_ci NOT NULL DEFAULT '' COMMENT '文章图片',
  `title` varchar(500) COLLATE utf8mb4_unicode_ci NOT NULL DEFAULT '' COMMENT '文章描述',
  `body` VARCHAR(1000) COLLATE utf8mb4_unicode_ci NOT NULL COMMENT '文章内容' ,
  `created_at` timestamp NULL DEFAULT NULL,
  `updated_at` timestamp NULL DEFAULT NULL,
  `deleted_at` timestamp NULL DEFAULT NULL,
  PRIMARY KEY (`id`),
  FULLTEXT(`body`)
) ENGINE=InnoDB AUTO_INCREMENT=100 DEFAULT CHARSET=utf8mb4 COLLATE=utf8mb4_unicode_ci; 

插入数据 

php artisan make:model Models/TextModel       创建模型层 绑定数据库   设置填充中文   进入config/app.php/      'faker_locale' => 'zh_CN',

// Textfactory.php 文件中
return [
        'name' => $faker->name,
        'title'=>$faker->text(100),
        'body' => $faker->realText(),
    ];
//Textseeder.php 文件中
  \App\Models\TextModel::truncate();
  factory(\App\Models\TextModel::class,100)->create();

执行命令   php artisan db:seed --class=TextSeeder

创建控制器

php artisan make:controller TextController

<?php

namespace App\Http\Controllers;

use App\Models\TextModel;
use Illuminate\Http\Request;

class TextController extends Controller
{
     public function index(){

        $data = TextModel::paginate(10);

        return['code'=>0,'mssage'=>'成功','data'=>$data];
    }
    public function textinfo(Request $request){
        $id = $request->input('id');
        $data= TextModel::find($id);
        return ['code'=>0,'mssage'=>'请求成功','data'=>$data];
    }
}

路由写入接口

Route::group(['prefix'=>'api'],function(){
    Route::get('text','TextController@index');
    Route::get('textinfo',"TextController@textinfo");
});

小程序端

html页面主页

<view>
  <scroll-view scroll-y="true" class="sview" bindscrolltolower="fangs">
    <view wx:for="{{fangs}}">
      <view  bindtap="cao" data-id="{{item.id}}" data-city="{{item.city}}">
        <view>{{item.name}}</view>
  <view>{{item.title}}</view>
  <image src="http://www.1110.com/{{item.pic}}"></image>
      </view>
  
</view>
  </scroll-view>
  <image src='../../img/timg.jfif' class='goTop' hidden='{{!floorstatus}}' bindtap="goTop"></image>
</view>

主页js

Page({

  /**
   * 页面的初始数据
   */
  data: {
    fangs:[],
    page:2,
    request:true
  },
 

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {
    var that =this;
    wx.request({
      url: 'http://www.1110.com/api/api/text',
      header: {
        'content-type': 'application/json' // 默认值
      },
      success (res) {
        that.setData({fangs:res.data.data.data});
      }
    })
  },
// 获取滚动条当前位置
onPageScroll: function (e) {
  console.log(e)
  if (e.scrollTop > 100) {
    this.setData({
      floorstatus: true
    });
  } else {
    this.setData({
      floorstatus: false
    });
  }
},

//回到顶部
goTop: function (e) {  // 一键回到顶部
  if (wx.pageScrollTo) {
    wx.pageScrollTo({
      scrollTop: 0
    })
  } else {
    wx.showModal({
      title: '提示',
      content: '当前微信版本过低，无法使用该功能，请升级到最新微信版本后重试。'
    })
  }
},
//跳转详情页
  cao:function(options){
    var id = options.currentTarget.dataset.id;
    var city = options.currentTarget.dataset.city;
    wx.navigateTo({
      url: '/pages/baidu/baidu?id='+id+'&city='+city,
    })
  
  },
  /**
   * 用户点击右上角分享
   */
  onShareAppMessage: function () {
   
  }
})

html 详情

    <view class="page-section page-section-spacing swiper">
      <swiper indicator-dots="{{indicatorDots}}"
        autoplay="{{autoplay}}" interval="{{interval}}" duration="{{duration}}">
        <block>
          <swiper-item>
            <image src="https://ss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=2210187226,3845220450&fm=11&gp=0.jpg" ></image>
          </swiper-item>
          <swiper-item>
            <image src="https://ss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=3308277231,2802906353&fm=26&gp=0.jpg" ></image>
          </swiper-item>
          <swiper-item>
            <image src="https://ss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=2332975657,3496749507&fm=26&gp=0.jpg" ></image>
          </swiper-item>
          <swiper-item>
            <image src="https://ss3.bdstatic.com/70cFv8Sh_Q1YnxGkpoWK1HF6hhy/it/u=2505845389,3637097424&fm=26&gp=0.jpg" ></image>
          </swiper-item>
          <swiper-item>
            <image src="https://ss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=1596649732,2844957470&fm=26&gp=0.jpg" ></image>
          </swiper-item>
        </block>
      </swiper>
    </view>
<view>
  {{xiangqing.body}}
</view>

<view class="map_container"> 
  <map class="map" id="map" longitude="{{longitude}}" latitude="{{latitude}}" scale="14" show-location="true" markers="{{markers}}" bindmarkertap="makertap"></map> 
  <button open-type="share">分享小黄图</button>
  <button class="fav_tag3" bind:tap="addFav" >添加收藏</button>
</view> 

js 详情

 // 引用百度地图微信小程序JSAPI模块 
var bmap = require('../../src/bmap-wx.min.js'); 
var wxMarkerData = []; 
Page({ 
    onShareAppMessage() {
        return {
          title: 'swiper',
          path: 'page/component/pages/swiper/swiper'
        }
      },
    data: { 
        background: ['demo-text-1', 'demo-text-2', 'demo-text-3'],
        indicatorDots: true,
        vertical: false,
        autoplay: true,
        interval: 500,
        duration: 20,
        markers: [], 
        rgcData: {},
        xiangqing:[]
    }, 
    onLoad: function(options) { 
        var that = this; 
       var id = options.id;
       wx.request({
        url: 'http://www.1110.com/api/api/textinfo?id='+id,
        header: {
          'content-type': 'application/json' // 默认值
        },
        success (res) {
         that.setData({
             xiangqing:res.data.data
         })
         
        }
        
      })
        // 新建百度地图对象 
        var BMap = new bmap.BMapWX({ 
            ak: 'n7oIRE71boDjBDK8nvoKphIDQwgzs7qV' 
        }); 
        var fail = function(data) { 
            console.log(data) 
        }; 
        var success = function(data) { 
            wxMarkerData = data.wxMarkerData; 
            that.setData({ 
                markers: wxMarkerData 
            }); 
            that.setData({ 
                latitude: wxMarkerData[0].latitude 
            }); 
            that.setData({ 
                longitude: wxMarkerData[0].longitude 
            }); 
        } 
        var city=options.city;
        // 发起geocoding检索请求 
        BMap.geocoding({ 
            address:city, 
            fail: fail, 
            success: success, 
            iconPath: '../../img/marker_red.png', 
            iconTapPath: '../../img/marker_red.png' 
        }); 
        
      },


  /**
   * 用户点击右上角分享
   */
  onShareAppMessage () {
    return{
        title:"小程序展示",
        path:'/pages/xiangqing/xiangqing?id',
      }
  }
})

git代码

git clone 下载 ssh地址
cd 到仓库
git checkout -b dev       创建分支
git checkout dev  进入分支
git push -u origin dev  上传分支 
git pull  更新数据
git add .  
git commit -m "备注"
git push origin dev     上传本地代码