资讯

精准传达 • 有效沟通

从品牌网站建设到网络营销策划,从策略到执行的一站式服务

微信小程序上线发布流程图文详解

最近花了一天左右的时间学习了下微信小程序的开发,试着练习一把的心态,搞了一个很简单的页面。

成都创新互联公司专注于企业网络营销推广、网站重做改版、博山网站定制设计、自适应品牌网站建设、H5建站商城网站建设、集团公司官网建设、成都外贸网站建设公司、高端网站制作、响应式网页设计等建站业务,价格优惠性价比高,为博山等各大城市提供网站开发制作服务。

就当是学习总结吧:学习要点还是挺多的,通过查看官方接口文档,熟悉微信小程序开发工具,工程架构,相比传统页面开发类似,微信小程序也是由js文件,页面布局文件wxml和样式文件wxss

一、先登录微信公众平台,在小程序栏目里注册获取appid,在开发工具里填写该appid,打开开发工具进行编码工作。

1.1、知识点巩固。

app.json文件

{
 "pages":[
  "pages/huangbaokang/huangbaokang",
  "pages/zhanglulu/zhanglulu"
 ],
 "window":{
  "backgroundTextStyle":"light",
  "navigationBarBackgroundColor": "#baf088",
  "navigationBarTitleText": "幸福婚姻",
  "navigationBarTextStyle":"black" 
 },
 "tabBar": {
  "list": [
   {
    "pagePath": "pages/huangbaokang/huangbaokang",
    "text": "黄宝康",
    "iconPath": "images/1.png",
    "selectedIconPath": "images/1.png"
   },
   {
    "pagePath": "pages/zhanglulu/zhanglulu",
    "text": "张露露",
    "iconPath": "images/2.png",
    "selectedIconPath": "images/2.png"
   }
  ]
 }


}

入口全局配置主要配置页签tabBar设置,全局pages定义,头部背景,及字体,网络超时等。

wxml标签的掌握

huangbaokang.wxml文件


黄宝康的帅气照

 
 
  
 

huangbaokang.js文件

Page({

 /**
  * 页面的初始数据
  */
 data: {
  photos_hbk: ['1.png', '2.png', '3.png', '4.png']
 }
})

huangbaokang.wxss文件

/* pages/huangbaokang/huangbaokang.wxss */
.title{
 font-size: 70rpx;
 text-align: center;
}

.photo-list{
 margin-top: 20rpx;
}

.photo-item{
 width: 100%;
 height: 100%;
 margin-top: 20rpx;
}

具体到页面的开发,需要学习wxml各种标签的用法,语句wx:for的使用,及动态数据绑定(使用{{}})。

事件函数处理

进一步掌握事件处理等,绑定一个方法,在js文件中相对应一个方法。

二、上传发布审核上线

编码完之后,可以在开发工具右上角点击上传按钮将代码至微信后台。如下:

微信小程序上线发布流程图文详解

输入相关版本号确定之后可以在微信小程序后台管理处看到提交的版本。

微信小程序上线发布流程图文详解

上图我的是提交完之后的,提交完之后进入审核中,一般一两天就能查看审核结果,通过审核之后,还需要发布上线。

经过上面的操作之后就可以在微信里,小程序处进行搜索我们自己开发的程序了。

微信小程序上线发布流程图文详解

附:工程架构图

 微信小程序上线发布流程图文详解

以上所述是小编给大家介绍的微信小程序上线发布流程详解整合,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对创新互联网站的支持!


分享标题:微信小程序上线发布流程图文详解
文章来源:http://cdkjz.cn/article/jogdeg.html
多年建站经验

多一份参考,总有益处

联系快上网,免费获得专属《策划方案》及报价

咨询相关问题或预约面谈,可以通过以下方式与我们联系

大客户专线   成都:13518219792   座机:028-86922220