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

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

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

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

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

前后端完全分离,按理一定会涉及到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; }
}

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

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

    MPVUE - 使用vue.js开发微信小程序 什么是mpvue? mpvue 是美团点评前端团队开源的一款使用 Vue.js 开发微信小程序的前端框架.框架提供了完整的 Vue.js 开发体验,开发 ...

  2. C#开发微信小程序(三)

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

  3. C#开发微信小程序(二)

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

  4. 基于小程序云Serverless开发微信小程序

    本文主要以使用小程序云Serverless服务开发一个记事本微信小程序为例介绍如何使用小程序云Serverless开发微信小程序.记事本小程序的开发涉及到云函数调用.云数据库存储.图片存储等功能,较好 ...

  5. 如何用TypeScript开发微信小程序

    微信小程序来了!这个号称干掉传统app的玩意儿虽然目前处于内测阶段,不过目前在应用号的官方文档里已经放出了没有内测号也能使用的模拟器了. 工具和文档可以参考官方文档:https://mp.weixin ...

  6. 关于开发微信小程序后端linux使用xampp配置https

    关于开发微信小程序后端linux使用xampp配置https 背景 由于最近开发微信小程序,前后端交互需要使用https协议,故需要配置https服务 服务器环境 服务器系统 ubuntu 环境 xa ...

  7. 开发微信小程序中SSL协议的申请、证书绑定、TLS 版本处理等

    在上篇随笔<基于微信小程序的系统开发准备工作>介绍了开发微信小程序的一些前期的架构设计.技术路线 .工具准备等方面内容,本篇随笔继续这个步骤,逐步介绍我们实际开发过程中对SSL协议的申请及 ...

  8. wn-cli 像React组件开发一样来开发微信小程序

    项目地址:wn-cli wn-cli wn-cli 像React组件开发一样来开发微信小程序 名字由来:wn -> weapp native 取第一个字母 Install npm install ...

  9. 用Vue.js开发微信小程序:开源框架mpvue解析

    前言 mpvue 是一款使用 Vue.js 开发微信小程序的前端框架.使用此框架,开发者将得到完整的 Vue.js 开发体验,同时为 H5 和小程序提供了代码复用的能力.如果想将 H5 项目改造为小程 ...

随机推荐

  1. Djangoday1 入门及第一个apphelloworld

    1 Django基础指令新建一个django project新建app创建数据库表,更新数据库表或字段使用开发服务器清空数据库创建超级管理员导出数据 导入数据Django 项目环境终端数据库命令行更多 ...

  2. MySQL双日志

    InnoDB引擎的redo log日志 解决什么问题? 我们每次更新数据如果都要直接写到硬盘存储的话,如果更新数据频繁的话,整个过程的Io成本和查找成本都会很高(比方说每次启动磁盘,平均的寻找数据时间 ...

  3. MySQL主从扩展知识

    6月29/7月2日任务 说明:这两天无新课,主要是扩充知识面注意:这两天的任务,需要回专贴.需要你们通过看这些东西总结成自己的心得. 不能照搬,必须要自己理解,能看多少就看多少,看不完也没有关系,但一 ...

  4. Netty学习——服务器端代码和客户端代码 原理详解

    服务器端代码和客户端代码 原理详解:(用到的API) 0.Socket 连接服务器端的套接字 1.TcompactProtocol   协议层2.TFrameTransport   传输层3.THsh ...

  5. 【Python成长之路】python 基础篇 -- 装饰器【华为云分享】

    [写在前面] 有时候看到大神们的代码,偶尔会用到@来装饰函数.当时查了资料,大致了解装饰器一般用于在不改变原函数的基础上 ,对原函数功能进行修改/增强.使用场景是:日志级别设置.权限校验.性能测试等. ...

  6. 一、Java基础篇

    1.简介 Java是由Sun Microsystems公司于1995年5月推出的Java面向对象程序设计语言和Java 平台的总称.由James Gosling和同事们共同研发,并在1995年正式推出 ...

  7. JQuery之选择集过滤

    JQuery选择集过滤应用如下: 代码实现: <script src="JS/jquery-3.4.1.js"></script> <script&g ...

  8. luogu P1650 田忌赛马 |贪心

    题目描述 我国历史上有个著名的故事: 那是在2300年以前.齐国的大将军田忌喜欢赛马.他经常和齐王赛马.他和齐王都有三匹马:常规马,上级马,超级马.一共赛三局,每局的胜者可以从负者这里取得200银币. ...

  9. 【django后端分离】rbac组件(文件源代码+使用)

    1:用户,角色,权限,菜单表设计 from django.db import models # 用户菜单 class UserMenu(models.Model): title = models.Ch ...

  10. 自然语言处理(NLP) - 数学基础(1) - 排列组合

    正如我在<自然语言处理(NLP) - 数学基础(1) - 总述>一文中所提到的NLP所关联的概率论(Probability Theory)知识点是如此的多, 饭只能一口一口地吃了, 我们先 ...