-
微信小程序从申请到开发(看开发内容需要有点前端的基础)
-
小程序申请
- 微信公众平台
- 邮箱:作为登录账号,请填写未被微信公众平台注册,未被微信开放平台注册,未被个人微信号绑定的邮箱
- 信息登记要注意,如果你的小程序涉及个体工商户,企业,你得用企业主体,还得付每年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(); // 选择id query.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一样的文章来源:https://www.toymoban.com/news/detail-716724.html
-
小程序开发完成后进行上传,上传完成进行提交审核,提交成功后进行备案,备案成功后就可以发布了。文章来源地址https://www.toymoban.com/news/detail-716724.html
-
到了这里,关于微信小程序申请,开发介绍及示例的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!