C#开发微信小程序(四)

睡一觉醒来,看到微信公众号推送的一篇鸡汤文,叫做《不会,我可以学!!!》深受鼓舞,回顾这些年,每天忙于业务开发,留给自己的学习时间并不多,一直很仰慕那些大牛们,梦想着自己有一天也能成为同样牛逼的人物,无奈只是一个普普通通的码农,但是梦想总是要有的,万一哪天实现了呢?

言归正传,还是回到小程序的话题上,随着Vue这两年的火爆,前后端完全分离的设计模式已经深入人心了,微信小程序就是该模式下的典型应用,至于该模式有什么优势,我就不说了,随便搜一下都能检索出来大量的文章,那么接下来的篇幅,就介绍一下小程序的前端代码。

关于小程序项目结构,框架介绍,组件说明等,请查看微信小程序官方文档,关于以下贴出来的代码部分我只是截取了一些片段,方便说明问题,如果需要查看完整源代码,可以在我的项目库中下载:

https://dev.tencent.com/u/dwBurning/p/ReallyWantToApi/git

https://git.dev.tencent.com/dwBurning/LazyOrders.git

前后端完全分析,按理一定会涉及到http请求跨域的问题,但是小程序通过wx.request发起请求的时候,并未涉及到跨域,为何?其实想想也知道,wx.request肯定不是通过ajax直接发请求到你的服务器的,而是先把请求交给微信的服务端,然后再由微信的服务端转发请求到你的服务器,每一个请求都在微信服务端做了中转,当然这个是小程序正式发布上线后的实现,那么,本地开发的时候是怎么解决这个问题的呢?

本地开发的时候,我搭建的http站点都是直接在本地跑的,也没有固定IP,用微信小程序的开发工具照样能拿到请求的数据,且没有跨域,这就要研究一下这个开发工具了,打开微信小程序开发工具的安装目录,你会发现里边有一个node.exe的文件,启动开发工具的时候,在进程中能找到node.exe的进程,关于这个进程的描述,写的很清楚,Node.js;JavaScript服务端到这里真相已经明了。

解决了跨域的问题,我们来看看首页的前端代码,如下图所示,首页分为三个部分,上边的轮播,左边导航,右边菜单

轮播是微信小程序提供的组件swiper,直接拿示例代码,改一改就是了

  <!-- swiper 轮播图片 -->
  <view class="top">
    <swiper class="swiper" indicator-dots="true" autoplay="true" interval="5000" duration="1000">
      <block wx:for="{{movies}}" wx:for-index="index">
        <swiper-item>
          <image src="{{item.url}}" class="slide-image" mode="aspectFill" />
        </swiper-item>
      </block>
    </swiper>
  </view>
  /**
   * 页面的初始数据
   */
  data: {
    movies: [{
        url: app.globalData.url + ‘?fileName=1.jpg‘
      },
      {
        url: app.globalData.url + ‘?fileName=2.jpg‘
      },
      {
        url: app.globalData.url + ‘?fileName=3.jpg‘
      }
    ],
    navLeftItems: [],
    navRightItems: [],
    curNav: 1,
    curIndex: 0
  },

左边导航是菜单的分类,右边显示了这个分类下的菜单明细,这个就涉及到我们的实体设计了,通过我们的swagger界面接口测试http://localhost:8089/api/Category,可以拿到接口的数据,下面我先贴出来,只关注前端的同学或者没有.Net开发环境的同学,可以直接在JS文件中贴上去,就可以预览到效果了。

此段的重点就在数组下标的绑定:data-index="{{index}}",

每一次点击通过JQuery获取到这个index:index = parseInt(e.target.dataset.index),

然后右边就绑定这个数组下标对应得数据:<block wx:for="{{navRightItems[curIndex].Menus}}">

{
  "Code": 0,
  "Message": "Success",
  "Context": [
    {
      "CategoryId": 1,
      "CategoryName": "经济快餐",
      "Menus": [
        {
          "MenuId": 1,
          "CategoryId": 1,
          "MenuName": "腐竹炒肉",
          "ImgPath": "http://localhost:8089/api/lazyorders?fileName=11.jpg",
          "Price": 15
        },
        {
          "MenuId": 2,
          "CategoryId": 1,
          "MenuName": "芹菜香干",
          "ImgPath": "http://localhost:8089/api/lazyorders?fileName=12.jpg",
          "Price": 14
        },
        {
          "MenuId": 3,
          "CategoryId": 1,
          "MenuName": "农家小炒肉",
          "ImgPath": "http://localhost:8089/api/lazyorders?fileName=13.jpg",
          "Price": 18
        },
        {
          "MenuId": 4,
          "CategoryId": 1,
          "MenuName": "青瓜炒蛋",
          "ImgPath": "http://localhost:8089/api/lazyorders?fileName=14.jpg",
          "Price": 14
        }
      ]
    },
    {
      "CategoryId": 2,
      "CategoryName": "精美小炒",
      "Menus": [
        {
          "MenuId": 5,
          "CategoryId": 2,
          "MenuName": "茄子煲",
          "ImgPath": "http://localhost:8089/api/lazyorders?fileName=25.jpg",
          "Price": 28
        },
        {
          "MenuId": 6,
          "CategoryId": 2,
          "MenuName": "小龙虾",
          "ImgPath": "http://localhost:8089/api/lazyorders?fileName=26.jpg",
          "Price": 88
        }
      ]
    }
  ]
}

/**
   * 生命周期函数--监听页面加载
   */
  onLoad: function(options) {
    var _this = this;
    util.checkSession();
    wx.request({
      url: app.globalData.urlCategory,
      success: function(res) {
        _this.setData({
          navLeftItems: res.data.Context,
          navRightItems: res.data.Context
        })
      }
    })

  },

  //事件处理函数
  switchRightTab: function(e) {
    // 获取item项的id,和数组的下标值
    let id = e.target.dataset.id,
      index = parseInt(e.target.dataset.index);
    // 把点击到的某一项,设为当前index
    this.setData({
      curNav: id,
      curIndex: index
    })
  },
  
<!--左侧栏-->
    <view class="nav_left">
      <block wx:for="{{navLeftItems}}">
        <view class="nav_left_items {{curNav == item.CategoryId ? ‘active‘ : ‘‘}}" bindtap="switchRightTab" data-index="{{index}}" data-id="{{item.CategoryId}}">
          {{item.CategoryName}}
        </view>
      </block>
    </view>

    <!--右侧栏-->
    <view class="nav_right">
      <scroll-view scroll-y="true" style="height: 100%">
        <block wx:for="{{navRightItems[curIndex].Menus}}">

          <view class="nav_right_items">
            <navigator url="details/details?menuId={{item.MenuId}}">
              <image class=‘nav_right_items_image‘ src="{{item.ImgPath}}"></image>
            </navigator>
            <text>{{item.MenuName}}</text>
            <text class=‘price_text‘>{{item.Price}}元/份</text>
            <navigator url="details/details?menuId={{item.MenuId}}">
              <image class=‘add_image‘ src=‘/images/add.png‘></image>
            </navigator>
          </view>

        </block>

      </scroll-view>

    </view>

前端的设计就完成了,当然还有CSS相关的代码,因为有完整的源代码,这里就不贴了,贴一下对应的C#实体类吧!

/// <summary>
/// 分类
/// </summary>
public class Category
{
    /// <summary>
    /// 主键ID
    /// </summary>
    public int CategoryId { get; set; }

    /// <summary>
    /// 分类 类别名
    /// </summary>
    public string CategoryName { get; set; }

    /// <summary>
    /// 该类别下的菜单
    /// </summary>
    public List<Menu> Menus { get; set; }
}

/// <summary>
/// 菜单表
/// </summary>
public class Menu
{
    /// <summary>
    /// 菜单ID
    /// </summary>
    public int MenuId { get; set; }

    /// <summary>
    /// 类别ID
    /// </summary>
    public int CategoryId { get; set; }

    /// <summary>
    /// 菜单名
    /// </summary>
    public string MenuName { get; set; }

    /// <summary>
    /// 对应的图片路径
    /// </summary>
    public string ImgPath { get; set; }

    /// <summary>
    /// 单价
    /// </summary>
    public decimal Price { get; set; }
}

原文地址:https://www.cnblogs.com/dwBurning/p/wechatminiprogramwithwebapi4.html

时间: 2024-10-08 16:35:56

C#开发微信小程序(四)的相关文章

微信+小程序购物系统开发微信小程序营销系统开发

行业+小程序的结合有无限可能性,想要玩转微信小程序,享受流量盛宴,可借助--河南鼎汉科技,帮您快速打造具有个性化特色的微信小程序.微信小程序系统开发平台.微信小程序购物商城系统开发1.8.8-3.8.07-6.8.0.5电/微, 微信小程序 微商城 微信小程序营销系统开发,微信公众平台订阅号,微信小程序购物商城系统开发定制. 在移动互联网时代从来不缺分销系统,随着移动电商.传统电商.传统商业企业纷纷进入社交电商领域,社交电商正在向专业平台化.团队规模化.渠道立体化.运作规范化等趋势发展.微信"小

MPVUE - 使用vue.js开发微信小程序

MPVUE - 使用vue.js开发微信小程序 什么是mpvue? mpvue 是美团点评前端团队开源的一款使用 Vue.js 开发微信小程序的前端框架.框架提供了完整的 Vue.js 开发体验,开发者编写 Vue.js 代码,mpvue 将其解析转换为小程序并确保其正确运行. 简单上手mpvue 官方提供了一套quickstart模板. vue init mpvue/mpvue-quickstart my-project 安装好依赖之后,执行npm run dev,将会将小程序文件打包进dis

公 司,如何注册开发,微信小程序?

公司如何注册开发微信小程序? 第一步:微信小程序的入口 可能很多人第一印象会在微信公众号的后台寻找小程序,如果是这样那就大错特错.小程序登录的入口还是微信管理后台的地址https://mp.weixin.qq.com/,第二步:注册信息填写 注册信息是和微信公众号注册流程一样,一个邮箱只能注册一次.已经注册过微信公众号的邮箱是不可以再注册的. 第三步:账号信息的填写 首先是账号基本信息的填写:包括机构的名称,营业执照号或是三证合一统一社会信用代码. 其次是验证方式:小程序注册于微信公众号也是两种

webstorm开发微信小程序代码提醒(webstorm开发工具)

使用了微信提供的开发工具是真心难用,卡顿厉害.中英文切写注释换相当不爽.还没办法多开窗口,相信大家也遇到过这种现象. 下边我们介绍下webstorm来开发微信小程序的一些配置: 1.首先FileType下Cascading Style Sheet 添加*.wxss 1.png 2.FileType下HTML 添加*.wxml 2.png 3.将其中的wecharCode.jar下载下来,然后在webStorm 的 File -> import settings 中导入即可 3.png 配置已经完

利用WordPress REST API 开发微信小程序从入门到放弃

自从我发布并开源WordPress版微信小程序以来,很多WordPress网站的站长问有关程序开发的问题,其实在文章:<用微信小程序连接WordPress网站>讲述过一些基本的要点,不过仍然有不少人对一些细节不明白,于是我就想着再写一篇比较全面而基础的教程,主要针对入门级别用户,高手就不用看了. WordPress版“守望轩”微信小程序开放源码地址:https://github.com/iamxjb/winxin-app-watch-life.net 至于标题,请原谅我,我标题党了. Word

什么行业适合开发微信小程序?

这段时间,随着微信小程序的系列大动作,商家选择开发微信小程序的越来越多,那么各行业开发微信小程序的优势究竟是什么呢? 总体来说,微信小程序开发优势: 1.便于分享:(小程序或其中任何一个界面都可以任意分享) 2.方便切换:(用户在使用小程序时,可以快速返回聊天) 3.消息推送:(商家可以随时发送商城消息给服务过的用户) 4.历史列表:(用户使用过的小程序会被放入列表,方便查询使用) 5.扫码使用:(用户扫一扫即可使用) 社动电商 微信小程序适用行业: 外卖点餐系统.上门服务系统.交通系统.出门旅

使用Sublime Text开发微信小程序

因为sublime只是敲代码的地方,最终运行结果还是得看官方的IDE,所以使用sublime开发微信小程序的流程是这样的: 创建小程序项目,直接将整个项目文件夹拖入sublime,即可在sublime里面进行编辑,而官方的IDE就只是单纯用来调试用的!!! 让代码提示加速你的编码速度 如今上架了微信小程序,果不其然,大神们开始写专属微信小程序的snippets(sublime通过 "Sublime-snippet" 实现快速补全代码),群友们也提供了插件下载的链接:https://gi

开发微信小程序的价值有哪些

互联网经济产业的发展,不少企业看到其中的投资价值,也知道其中的商机是不可限量的.目前的微信社交电商已经直逼淘宝天猫这类大电商平台,而活跃用户也是几亿之多,这样的微信小程序大家认为价值是多少呢?其实不少传统企业思维比较传统,对互联网的创新,以及社交电商的发展还存在一定偏见,所以并不知道这其中的利害关系.小编来告诉大家,这其中究竟有多少的价值. 微信小程序作为一个公开入驻的平台,只要企业有资质就可以入驻.入驻后企业就可以展开一系列的推广,像微信流量的截取,活跃用户的注册关注,微信小程序相当于企业的一

开发微信小程序价格一般是多少

针对企业所关心的微信小程序开发价格问题,今天为大家进行一个详细的讲解.由于行业的定价标准不同,公司的收费是否合理,这个是自然备受关注的.要知道,一般开发软件这个都是收费较高的,但也有一些价格比较低的公司,就是针对企业的需求不高.像现在火热的微信小程序,收费问题依然存在一定的差距. 就像现在的很多企业一样,他们喜欢听朋友介绍,看别人的推荐,其实都不如自己亲自去调查考察一下.现在网络这么方便,有什么信息在网上一查都可以知道,如果没有好的口碑,没有在网上可以找到任何的信息,那么价格方面应该是没有保障的

开发微信小程序外包公司怎么选择

人们的生活已经离不开网络,走在大街上许多人都在看着手机,获取各类信息,有刷微博关注新闻动态,有刷朋友圈了解熟人近况,乐在其中.由于微信用户数量多,小程序推出之后,不少企业和商家都希望拥有一个小程序,帮助它们扩展业务.但一些企业可能不怎么开发小程序,所以开发微信小程序外包公司由此出现. 各种APP软件,微信小程序层出不穷,让人眼花缭乱,但也会有良莠不齐的情况.从交通出行到电商购物,微信小程序已应用到多个场景.这可能也得益于开发微信小程序外包公司的帮助. 通常来说,一个致力于开发微信小程序的外包公司