宁波小程序开发_宁波软件开发_宁波网络公司【昱远信息】 15058005455
小程序开发系统:小程序常用技术栈,感兴趣的朋友可以试着去做一下|昱远信息系统开发

前言:

本文介绍了小程序 小程序商城定制开发 ,制作小程序需要用到的技术栈,以及一个小案例。有兴趣的朋友可以试试看。

如果有什么需要改进的地方,请告诉我。

在这里感谢您的支持

在这里插入图片描述

文章目录

小程序简介

微信小程序服务端开发_微信小程序用什么开发_小程序开发系统

小程序是一种新的开放能力,开发者可以快速开发小程序。小程序可以在微信内轻松获取和传播,同时拥有出色的用户体验。

主要优势

用户可以轻松获取服务 小程序软件开发 商城小程序开发 ,无需安装或下载即可封装一系列功能更丰富、用户体验极佳的接口能力,帮助快速开发和迭代不占用内存,无需下载少广告,有利于到良好的用户体验。开发小程序的常用技术栈

JavaScript:JavaScript(简称“JS”)是一种具有函数优先级的轻量级函数。一种解释或即时编译的编程语言。尽管它以开发网页的脚本语言而闻名,但它也用于许多非浏览器环境中。 JavaScript 基于原型编程,是一种多范式的动态脚本语言,支持面向对象、命令式、声明式、函数式编程范式。

微信小程序的JavaScript运行环境既不是Browser也不是Node.js。它运行在微信App的上下文中 小程序开发制作 ,不能操作Browser上下文下的DOM,也不能通过Node.js相关接口访问操作系统API。所以小程序开发系统,严格来说,微信小程序并不是Html5,虽然开发过程和使用的技术栈和Html5是一样的。

WXML:全称WeiXin Markup Language,是由小程序框架设计的一套标记语言。结合小程序的基本组件和事件系统,可以构建页面的结构。

微信小程序服务端开发_小程序开发系统_微信小程序用什么开发

作为微信小程序的展示层,它没有使用Html,而是基于自己发明的XML语法的描述。

WXSS:用于修改表示层的样式。 WXSS(WeiXin Style Sheets)是MINA设计的一套样式语言,用来描述WXML的组件样式。

WXSS 用于确定应如何显示 WXML 组件。为了适应广大的前端开发者,我们的WXSS具备了CSS的大部分特性。同时,为了更适合开发微信小程序,我们对 CSS 进行了扩展和修改。与css相比 小程序定制 ,我们的扩展功能有:尺寸单位和样式导入。

在这里插入图片描述

小程序常用模块

WXML。微信标记语言,用于展示UI模板,类似于HTML,文件后缀为“.wxml”。

小程序开发系统_微信小程序用什么开发_微信小程序服务端开发

WXSS。全称WeiXin Style Sheets,用于指定UI样式小程序开发系统,拥有CSS的大部分特性。扩展基于 CSS 的尺寸单位和样式导入。文件扩展名为“.wxss”

WXS。全称微信文。封装好的JS一般嵌入在WXML页面中,构建页面非常方便,标签为""wxs""/wxs""。

JS。普通的 JavaScript,常用于控制整个页面的逻辑。后缀为“.js”

JSON。用于项目全局配置或单页配置,后缀为“.json”。

在这里插入图片描述

小程序案例(部分代码)

微信小程序服务端开发_微信小程序用什么开发_小程序开发系统

效果演示:

在这里插入图片描述

p>

如果需要全部代码,可以找博主私聊

部分代码:

JS:

微信小程序用什么开发_微信小程序服务端开发_小程序开发系统

import request from "../../lib/request";
const app = getApp();
import serviceData from '../../data/config';
Page({
    data : {
        products:[],
        currentPage:1,
        perPage : 5
    },
    onLoad(option){
        var categoryId = option.id;
        var pageData = new Object();
        pageData.page = this.data.currentPage;
        pageData.per_page = this.data.perPage;
        //request({path:'/categories/' + categoryId + '/products', data: pageData})
        //.then(({data:products}) => this.setData({products}));
        this.setData({products: serviceData.categoryData});
        /*wx.setNavigationBarTitle({
          title: option.title,
          success: function(res) {
            // success
          }
        })*/
    },
    navigateToProduct(event) {
        var productId = event.currentTarget.dataset.goodsId;
        wx.navigateTo({
        url: '../products/products?id=' + productId
        });
    },
    lower : function(option){
        var categoryId = option.id;
        console.log('lower more products data');
        wx.showNavigationBarLoading();
        var that = this;
        setTimeout(()=>{
            wx.hideNavigationBarLoading();
            var nextPageData = new Object();
            nextPageData.per_page = this.data.perPage;
            nextPageData.page = this.data.currentPage +1;
            var products = serviceData.categoryData;
            this.setData({currentPage:++this.data.currentPage});
            this.setData({products:this.data.products.concat(products)});//concat 拼接在一起
      }, 1000);
  },
});
JSON
{
    "backgroundTextStyle":"light",
    "navigationBarBackgroundColor": "#000",
    "navigationBarTitleText": "水果生鲜",
    "navigationBarTextStyle":"white"
    
}

WXML


<scroll-view class="product-list"  bindscrolltolower="lower" scroll-y="true" style="height:100%" scroll-into-view="{{toView}}"
upper-threshold="10">
<view class="product-group">
    <view class="product" wx:for="{{products}}" wx:for-item="product" data-goods-id="{{product.id}}" bindtap="navigateToProduct">  
      <view><image mode="scaleToFill" src="{{product.covers_image}}">image>view>
      <view class="product-content product-name"><text>{{product.goods_name}}text>view>
      <view class="product-content product-price"><text>¥ {{product.goods_price}}text>
      <text class="product-market">¥ {{product.market_price}}text>
      view>
    view>
  view>
scroll-view>

WXSS

.product-list{
    background-color: white;
    box-sizing: border-box;
    padding: 2rpx;
}
.product-group{
    margin: 5rpx;
    padding:2rpx;
    display: block;
    overflow: hidden;
}
.product{
    width:350rpx;
    border: 1px solid #e2e2e2;
    float: left;
    margin: 6rpx;
}
.product image {
    height: 300rpx;
    width: 100%;
}
.product-name {
    height: 60rpx;
    padding-bottom: 5rpx;
    border-bottom: 1px solid #efefef;
    font-size: 25rpx;
    white-space: nowrap;
    text-overflow: ellipsis;
}
.product-content  {
    margin: 15rpx;
    overflow: hidden;
}
.product-price {
    margin-top: 15rpx;
    color: red;
    margin-bottom: 15rpx;
    font-size: 28rpx;
    font-weight: 1rpx;
}
.product-market {
    margin:10rpx;
    color: darkgray;
    font-size: 24rpx;
    font-weight: 1rpx;
    text-decoration:line-through;
}
​

文章到此结束小程序开发系统,喜欢喜欢的朋友可以试试看。如果大家有什么不合适或者改进的地方,欢迎大家一起交流。 在这里插入图片描述

再次感谢小薇的支持

在这里插入图片描述

【昱远信息系统定制开发】

返回列表

相关动态