西安微信网站电商素材网站

微信小程序从申请到开发（看开发内容需要有点前端的基础）

• 小程序申请

  • 微信公众平台
  • 邮箱：作为登录账号，请填写未被微信公众平台注册，未被微信开放平台注册，未被个人微信号绑定的邮箱
  • 信息登记要注意，如果你的小程序涉及个体工商户，企业，你得用企业主体，还得付每年300元的审核费，不然备案不通过！！！备案不通过就无法发布，只能自己和添加的测试人员能看到。

• 当所有的准备工作做好之后，接着就要开始进行微信小程序的开发，小程序开放有一套独有的开发工具，
  下在地址为：https://developers.weixin.qq.com/miniprogram/dev/devtools/download.html，安装打开
  开发工具之后，默认会帮我们建立如下的项目结构：

• pages展开之后，结构如下图所示：
  

• page下面的层级，如下如所示：
  

• WXML全称WeiXin Markup Language，是框架设计的一套标签语言，结合组件、事件系统来构建页
  面的结构，其语法参考以下示例代码：

  <!-- 滚动字幕 -->
  <view class="notice"><view class="notice_desc"><view style="transform: translateX(-{{ distance }}px);"><text style="margin-right:{{ space }}px;"></text><text id="mjltest">{{ text }}</text><text style="margin-right:{{ space }}px;"></text><text>{{ text }}</text></view></view>
  </view>
  <!-- 数据列表 -->
  <view class="spList"><block class="" wx:for="{{goods.data}}" wx:key="{{goods.data}}"><view id="{{item.id}}" style='display:flex;height:120px;'><!-- 左边图片 --><view style= 'width:100px;height:150px;margin:10px;'><image bindtap="previewImg" wx:if="{{item.imgSrc == ''}}" class="index-logo" style="width:100px;height:100px" src="/images/goods/fm.png"></image><image bindtap="previewImg"  wx:else="{{item.imgSrc}}" class="index-logo" style="width:100px;height:100px" data-imgUrl="{{item.imgSrc}}" src="{{item.imgSrc}}"></image></view><!-- 右边内容 上下结构 --><view style='display: flex;flex-direction: column;margin:10px'><label class="item_title">{{item.title}}</label><label class='item_content'>{{item.content}}</label></view></view><!-- 分割线（重点） start--><view class="{{index%1 === 0 && goods.data.length-index !== 0 && goods.data.length-index !== 1? 'hasLine': 'noLine'}}"></view></block>
  </view>

• 逻辑层，是事务逻辑处理的地⽅。对于⼩程序⽽⾔，逻辑层就是.js脚本⽂件的集合。逻辑层将数据进⾏处理后发送给视图层，同时接收视图层的事件反馈。具体函数参考相关文档，此处不做详细介绍，直接上代码（相关路径图片自己放）：

  // pages/index1/index1.js
  Page({/*** 页面的初始数据*/data: {xs:true,goods: {"data": [{"id": 1,"imgSrc": "/images/goods/data1.png","title": "test1","content": "我是列表数据1"},{"id": 2,"imgSrc": "/images/goods/data2.png","title": "test2","content": "我是列表数据2"}]},text: "20年老店！质量有保障！欢迎新老顾客前来选购！",step: 1, // 滚动速度distance: 80, // 初始滚动距离space: 110,interval: 18 // 时间间隔},/*** 生命周期函数--监听页面加载*/onLoad: function (options) {},/*** 生命周期函数--监听页面初次渲染完成*/onReady: function () {},/*** 生命周期函数--监听页面显示*/onShow: function () {var that = this;var query = wx.createSelectorQuery();// 选择idquery.select('#mjltest').boundingClientRect();query.exec(function(res) {var length = res[0].width;var windowWidth = wx.getSystemInfoSync().windowWidth; // 屏幕宽度that.setData({length: length,windowWidth: windowWidth,space:windowWidth});that.scrollling(); // 第一个字消失后立即从右边出现});},scrollling: function() {var that = this;var length = that.data.length; // 滚动文字的宽度var windowWidth = that.data.windowWidth; // 屏幕宽度var interval = setInterval(function() {var maxscrollwidth = length + that.data.space;var left = that.data.distance;if (left < maxscrollwidth) { // 判断是否滚动到最大宽度that.setData({distance: left + that.data.step})} else {that.setData({distance: 0 // 直接重新滚动});clearInterval(interval);that.scrollling();}}, that.data.interval);},/*** 生命周期函数--监听页面隐藏*/onHide: function () {},/*** 生命周期函数--监听页面卸载*/onUnload: function () {},/*** 页面相关事件处理函数--监听用户下拉动作*/onPullDownRefresh: function () {},/*** 页面上拉触底事件的处理函数*/onReachBottom: function () {},/*** 用户点击右上角分享*/onShareAppMessage: function () {},/*** 用于点击图片放大*/previewImg: function(e) {let arr = []arr.push(e.currentTarget.dataset.imgurl)wx.previewImage({current: e.currentTarget.dataset.imgurl, //当前图片地址urls: arr, //所有要预览的图片的地址集合 数组形式success: function (res) {},fail: function (res) {},complete: function (res) {},})}
  })
  

• wxss文件，就是对应的css样式喽，修改页面的样式，开发工具有手机模拟器调试起来很方便，还是上代码：

  /* pages/index1/index1.wxss */
  page{.spList{margin-top: 35px;
  }.item_content{width:100%;height:50px;font: size 12pt;color:rgb(92, 77, 77); word-break: break-al1;text-overflow: ellipsis;overflow: hidden;
  }.item_from{width:130px;font-size:10pt;color:#999
  }.item_iscollect{width:90px;height:18px;font-size:8pt;color:white;border-width:1px;border-style:solid;text-align:center; border-radius :5px;background-color: red;
  }.item_time{width:100%;font-size:10pt;color:#999;word-break: break-all;text-overflow: ellipsis;overflow: hidden;margin-left: 20px;
  }
  .hasLine{width: 750rpx;height: 2rpx;border-top: 2rpx solid white;left: -30rpx;position: relative;
  }
  .noLine{display: none;
  }.preview {cursor: pointer;
  }
  .item_title {font-weight: bold;
  }
  .notice {width: 100%;height: 56rpx;line-height: 56rpx;background-color: #fff;box-shadow: 0 3rpx 6rpx 1rpx rgba(0,97,6,0.4100);border-radius: 30rpx;position: absolute;top: 0px;left:auto;display: flex;
  }
  .notice .notice_desc {margin-right: 40rpx;font-size: 28rpx;color: rgb(238, 20, 20);overflow: hidden;white-space: nowrap;
  }
  

  注意：这里注意一些背景图或者占比比较大的元素，最好使用百分比，不然换不同大小型号的手机，显示可能会有问题

• 展示上面的代码成果（我的数据就不展示了，模糊处理下）：
  

• 版本管理，在开发工具中可以直接跳转，注册后，可以进行代码提交，跟SVN和Git一样的

• 小程序开发完成后进行上传，上传完成进行提交审核，提交成功后进行备案，备案成功后就可以发布了。