专栏首页程序源代码一套完全开源的微信小程序商场系统

一套完全开源的微信小程序商场系统

功能概述

Open-Shop小程序商城,包括:分销(支持三级)、团购(拼多多模式)、秒杀、优惠券、等功能,前后端全部开源。做全网最开源、最稳定、功能做强大的开源小程序商城。

使用说明

特点

  • 免费完整开源:基于MIT协议,源代码完全开源,无商业限制,51工作室开发团队承诺将系统永久完整开源;
  • 无BUG:经过严格测试,开箱即用;
  • 编码优雅:代码结构清晰,注解非常详细,方便学习和使用;
  • 持久更新:会定期公布开发计划。并按计划提交新的功能;
  • 活跃的社群:官方QQ群有专人回复,及时耐心的解答问题;

面向对象

  • Open-Shop是企业在创立初期很好的技术基础框架,加快公司项目开发进度,当然也可以对现有的系统进行升级;
  • 个人开发者也可以使用Open-Shop承接外包项目;
  • 初学JAVA的同学可以下载源代码来进行学习交流;

技术框架

  • 核心框架:Spring Framework 4
  • 安全框架:Apache Shiro 1.2
  • 视图框架:Spring MVC 4
  • 持久层框架:MyBatis 3
  • 数据库连接池:Alibaba Druid 1.0
  • 日志管理:SLF4J 1.7、Log4j
  • JS框架:Vue 2.5.1,iview,layer 3.0.3,jquery 2.2.4,jqgrid
  • CSS框架:Twitter bootstrap3.3.7。
  • 富文本:froala_editor1.2.2

开发环境

建议开发者使用以下环境,这样避免版本带来的问题

  • IDE:eclipse
  • DB:Mysql5.8
  • JDK:JAVA8
  • WEB:Tomcat8

运行环境

  • WEB服务器:Weblogic、Tomcat 等
  • 数据库服务器:Mysql5.8
  • 操作系统:Windows、Linux、Unix 等

快速体验

  • 将Open-Shop项目源码通过maven形式导入eclipse;
  • 导入Open-Shop.sql数据文件,注意:数据库使用utf-8编码;
  • 修改platform-admin/platform.properties文件中的数据库设;
  • tomcat中加载platform-framework项目
  • 访问后台地址:http://ip|域名/项目发布名/
  • 管理员账号,用户名:默认 密码:默认

小程序部署

  • 打开小程序工具;
  • 选择你下载的源代码wx-mall小程序项目;
  • 输入你的AppID;
  • 填写你的项目名称;
  • 进入之后修改config文件夹里的api.js文件,把NewApiRootUrl改为你后台接口地址即刻运行。

源码下载

https://gitee.com/old-peanut/wechat_applet__open_source.git

秘籍

准备工作

IDE搭建

就不多说了,没有内测码去下载个破解版吧

知识准备

JavaScrip还是要看看的 HTML+CSS 大概知道是干啥的就行

从零开始

微信小程序中就四种类型的文件

  • js ---------- JavaScrip文件
  • json -------- 项目配置文件,负责窗口颜色等等
  • wxml ------- 类似HTML文件
  • wxss ------- 类似CSS文件

在根目录下用app来命名的这四中类型的文件,就是程序入口文件。

app.json

必须要有这个文件,如果没有这个文件,IDE会报错,因为微信框架把这个作为配置文件入口,你只需创建这个文件,里面写个大括号就行 以后我们会在这里对整个小程序的全局配置。记录了页面组成,配置小程序的窗口 背景色,配置导航条样式,配置默认标题。

app.js

必须要有这个文件,没有也是会报错!但是这个文件创建一下就行 什么都不需要写以后我们可以在这个文件中监听并处理小程序的生命周期函数、声明全局变量。

app.wxss

这个文件不是必须的。因为它只是个全局CSS样式文件

app.wxml

这个也不是必须的,而且这个并不是指主界面哦~因为小程序的主页面是靠在JSON文件中配置来决定的

有了这两个文件你运行程序,IDE就不会报错了,也意味着这是最简单的微信小程序

Hello World

创建程序实例

app.js文件管理整个程序的生命周期,所以在里面添加如下代码:

App({
  onLaunch: function () {
    console.log('App Launch')
  },
  onShow: function () {
    console.log('App Show')
  },
  onHide: function () {
    console.log('App Hide')
  }
})

具体API解释如下

美化ActionBar

json文件负责配置ActionBar颜色,我们只需要在里面添加如下代码即可,下图有参数说明!

{
 "window":{
 "navigationBarBackgroundColor": "#BBDEF8",
 "navigationBarTitleText": "Demo",
 "navigationBarTextStyle":"white"
   }
}

美化页面

美化页面我们用到了 wxml 和 wxss文件 为了程序代码结构简洁我们需要在跟目录下创建一个新文件夹 名字随意,我们这里叫pages然后在pages文件夹里再创建新文件夹 名字随意 这里我们叫 index然后我们创建index.wxml文件然后在里面写入以下代码

<view>
    <text class="window">Hello</text>
</view>

然后创建index.wxss文件然后在里面写入以下代码

.window{
  color=#4995fa;
}

然后我们创建 index.js文件

在文件中输入如下代码(输入Page IDE会有提示)

Page({
 data:{
 // text:"这是一个页面"
  },
 onLoad:function(options){
 // 页面初始化 options为页面跳转所带来的参数
  },
 onReady:function(){
 // 页面渲染完成
  },
 onShow:function(){
 // 页面显示
  },
 onHide:function(){
 // 页面隐藏
  },
 onUnload:function(){
 // 页面关闭
  }
})

函数解释如下:

配置首页

Json文件负责配置页面路径所以我们在里面加入如下代码 其中index的含义 其实就是指index.js文件这里需要说明一点 pages 里面的路径其实是指向js文件的如果一个目录下没有该名称的js文件是会报错的!

"pages":[
 "pages/index/index"
],

完成了!我们来运行程序!

声明

【写著说明】以上内容分享给喜欢编程,有梦想的程序员们,希望能够帮助到你们。以上文章属于此公众号原创所有,如需转载请注明出处。

【免责申明】本公众平台不是广告商,也没有为其他三方网站或者个人做广告宣传。此分享的源代码和文章是小编在项目中、学习中整理的一些认为不错的项目。用户产生的一些自愿下载或者付费行为。与平台没有直接关系

本文分享自微信公众号 - 程序源代码(itcode),作者:程序源代码

原文出处及转载信息见文内详细说明,如有侵权,请联系 yunjia_community@tencent.com 删除。

原始发表时间:2019-06-27

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • springcloud学习手册-Config 分布式配置中心

    导读 | Config分布式配置中心 ? 一、为什么需要使用配置中心来统一管理配置呢? 通常在一个分布式环境中,同类型的、不同类型的服务往往多达几个...

    程序源代码
  • springcloud学习手册-实现Config server的高可用

    一、GIT是什么 Git是一个开源的分布式版本控制系统,可以有效、高速的处理从很小到非常大的项目版本管理。Git 是 Linus Torvalds ...

    程序源代码
  • 【程序源代码】垃圾识别小程序(源码)

    前端:微信小程序采用 uni-app 开发框架,uni-app 是一个使用 Vue.js 开发所有前端应用的框架,开发者编写一套代码,可发布到iOS、Andro...

    程序源代码
  • 做网站-推荐3种CSS,JS合并的方式

    在Web项目的开发中,js,css文件会随着项目的开发变得越来越多,越来越大,这就给给性能方面带来一些问题,如,页面引入的的js,css越多的话,那么对就增加了...

    企鹅号小编
  • 其他篇之操作系统——文件管理

    文件管理是操作系统的功能之一,由于系统的内存有限并且不能长期存储,故平时总是把数据以文件的形式存储在外存中,需要时再将其调入内存。文件管理的主要内容有:

    一半是我
  • VC工程中后缀为.cpp,.h,.rc,.dsp,.dsw

    (其它.clw .opt .aps等后缀文件,见下面说明) .opt 工程关于开发环境的参数文件。如工具条位置等信息;

    阳光岛主
  • 简单优化前端工程几种方式(上篇)

    如果A网站和B网站, 同时使用了https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js的资源,...

    zhaoolee
  • 自定义View实战--实现一个清新美观的加载按钮

    当时在心里问自己能不能做,答案肯定是能做的,不过我比较懒,觉得中间那个伸缩变化要编写很多代码,所以懒得理。后来,为了不让自己那么浮躁,也为了锻炼自己的耐心程度,...

    Frank909
  • SQL Server 多表数据增量获取和发布 2.3

    小狐狸
  • 十分钟了解 TypeScript 是如怎样工作的

    本文概述了 TypeScript 的工作原理:典型的 TypeScript 项目的结构是什么?什么被编译以及怎样编译?我们如何使用 IDE 编写 TypeScr...

    疯狂的技术宅

扫码关注云+社区

领取腾讯云代金券