8080端口下运行的一个本地服务器在文件夹下创建

菏泽炫佑科技 菏泽炫佑小程序开发 菏泽炫佑app制作 炫佑科技

8080端口下运行的一个本地服务器在文件夹下创建

此时会显示一个运行在8080端口下的本地服务器。

在文件夹中创建data.json文件作为服务器数据

2.下载微信开发工具

第1步：安装

首先下载微信开发工具，直接下载安装，点击下一步

2.1 创建项目应用：安装完成后，打开并扫描二维码登录。发布小程序需要企业级认证公众号8080端口下运行的一个本地服务器在文件夹下创建，个人订阅号无法发布。 所以我这里选择无AppID，选择本地一个空文件夹来创建项目，勾选创建快速启动项目来生成demo。

3. 编写小程序：demo 初始化完毕，包含一些简单的代码文件微信小程序开发搭建，其中 app.js、app.json、app.wxss 是必不可少的。 小程序将读取这些文件来初始化实例。

app.js是小程序的初始化脚本。 您可以在此文件中监控小程序的生命周期、申请全局变量以及调用API。

app.json 是小程序的全局配置，pages 设置页面路径组成（默认**个为首页），设置默认页面的窗口性能等。

app.wxss是整个小程序的通用样式表。 类似于网站开发中的.css

2、小程序框架

1.小程序配置

app.json主要分为五个部分：pages：页面组、：框架样式（状态栏、导航栏、标题、窗口背景色）、：底部菜单、：网络超时设置、debug：开启调试模式

page.json针对页面单独设置，级联app.json的全局设置

//app.json
{
  "pages":[
    "pages/index/index",
    "pages/logs/logs"
  ],
  "window":{
    "backgroundTextStyle":"light",
    "navigationBarBackgroundColor": "#000",
    "navigationBarTitleText": "WeChat",
    "navigationBarTextStyle":"white"
  }
}

注：如果要创建新的页面组，请在“pages”中添加路径，例如：“pages/join/join”，系统可以自动创建一组加入页面组

2.小程序逻辑

使用App()注册一个小程序。 必须在app.js中注册，不能多次注册。

App({//如下为小程序的生命周期
  onLaunch: function() { },//监听初始化
  onShow: function() {  },//监听显示（进入前台）
  onHide: function() {  },//监听隐藏（进入后台：按home离开微信）
  onError: function(msg) {  },//监听错误
  //如下为自定义的全局方法和全局变量  
  globalFun:function(){},
  globalData: \'I am global data\'
})

使用Page()注册一个页面，注册到每个页面的js文件中。

Page({
  data: {text: "This is page data."},//页面数据，用来维护视图，json格式
  onLoad: function(options) {  },//监听加载
  onReady: function() {  },//监听初次渲染完成
  onShow: function() {  },//监听显示
  onHide: function() {  },//监听隐藏
  onUnload: function() {  },//监听卸载
  onPullDownRefresh: function() {  },//监听下拉
  onReachBottom: function() {  },//监听上拉触底
  onShareAppMessage: function () {  },//监听右上角分享
  //如下为自定义的事件处理函数（视图中绑定的）
  viewTap: function() {//setData设置data值，同时将更新视图
    this.setData({text: \'Set some data for updating view.\'})
  }
})

3.小程序视图与事件绑定

在每个页面的wxml文件中，对页面js中的数据进行数据绑定，并自定义事件绑定。

{{text}}
 {{item}} 
 WEBVIEW 
 APP 
 MINA 



 点我点我 

Page({
  data: {//data数据主要用于视图绑定
    text:"我是一条测试",
    array:[0,1,2,3,4],
    view:"APP",
    template:{
        staffA: {firstName: \'Hulk\', lastName: \'Hu\'},
        staffB: {firstName: \'Shang\', lastName: \'You\'}
    }
  },
  ViewTap:function(){console.log(\'额，点到我了了~\')}//自定义事件，主要用于事件绑定
})

4、小程序风格

在每个页面的wxss文件中，用wxml设置样式结构，相当于css，扩展了rpx单元。 其中app.wxss默认为全局样式，影响所有页面。

3.开发demo如下图

1.轮播图片效果：

查看微信小程序开发官方文档：

注意：此时图片*好不要使用网上图片。 您需要将它们下载到本地并调用它们。 否则，您将无法阅读图片。

index.wxml:视图层

/** swiper html **/
  <swiper
  indicator-dots="{{indicatorDots}}"
  autoplay="{{autoplay}}"
  interval="{{interval}}"
  duration="{{duration}}"
  indicator-dots=\'true\'
>
  <block wx:for="{{imgUrls}}">
    <swiper-item>
      <image src="{{item}}" class="slide-image" width="355" height="150" />
    swiper-item>
  block>
swiper>
/** 第二板块列表 **/
<view class=\'item-list\'>
<view class=\'pro-list\' wx:for="{{proLists}}" bindtap=\'toDetail\' data-index="{{index}}">
<view class=\'pro-logo\'><image width="150" height="100" src=\'{{item.logo}}\'>image>view>
<view class=\'pro-right\'>
  <view class=\'pro-title\'>{{item.title}}
  view>
  <text class=\'pro-desc\'>{{item.desc}}text>
  <view class=\'pro-button\'><button>morebutton><button open-type="contact">contactbutton>view>
view>
view>
view>

index.js：数据层

//index.js
//获取应用实例
const app = getApp()
Page({
  data: {
    imgUrls: [
      \'/assets/1.jpg\',
      \'/assets/2.jpg\',
      \'/assets/3.jpg\'
    ],
    indicatorDots: false,
    autoplay: false,
    interval: 5000,
    duration: 1000,
    proLists:null
  },
  onLoad: function () {
    this.getProList();
  },
  toDetail:function(e){
    console.log(e);
    var index=e.currentTarget.dataset.index;
    console.log(index);
    var proLists = this.data.proLists;
    var title = proLists[index].title;
    wx.navigateTo({
      url:\'/pages/detail/detail?title=\'+title,
    })
  },
  getProList: function(){
    var self=this;
    wx.request({
      url: \'http://127.0.0.1:8080/data.json\',
      method:\'GET\',
      success:function(res){
        // console.log(res);
        self.setData({
          proLists:res.data,
        })
      }
    })
  }
})

1、代码实现：

说明：-dots="true"，显示轮播图片下方的小点，wx:for="{{}}"，遍历data中的数组，将图片显示在页面上

2.第二部分列表实现：

炫佑科技专注互联网开发小程序开发-app开发-软件开发-网站制作等