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


Posted in Javascript onMay 06, 2019

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

就当是学习总结吧:学习要点还是挺多的,通过查看官方接口文档,熟悉微信小程序开发工具,工程架构,相比传统页面开发类似,微信小程序也是由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文件

<!--pages/huangbaokang/huangbaokang.wxml-->
<view class='title'>黄宝康的帅气照</view>
<view class='photo-list' wx:for="{{photos_hbk}}" >
 <!--遍历图片文件,生成各个view-->
 <view class='photo-item'>
  <image src='/images/hbk{{index+1}}.png'></image>
 </view>
</view>

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文件中相对应一个方法。

二、上传发布审核上线

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

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

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

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

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

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

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

附:工程架构图

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

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

Javascript 相关文章推荐
jquery1.83 之前所有与异步列队相关的模块详细介绍
Nov 13 Javascript
javascript中数组的冒泡排序使用示例
Dec 18 Javascript
JavaScript中对JSON对象的基本操作示例
May 21 Javascript
浅谈jQuery before和insertBefore的区别
Dec 04 Javascript
详解Angular2中Input和Output用法及示例
May 21 Javascript
jQuery 控制文本框自动缩小字体填充
Jun 16 jQuery
详谈ES6中的迭代器(Iterator)和生成器(Generator)
Jul 31 Javascript
JS 仿支付宝input文本输入框放大组件的实例
Nov 14 Javascript
微信小程序基于canvas渐变实现的彩虹效果示例
May 03 Javascript
layui实现数据表格点击搜索功能
Mar 26 Javascript
Emberjs 通过 axios 下载文件的方法
Sep 03 Javascript
layui多图上传实现删除功能的例子
Sep 23 Javascript
ES6的解构赋值实例详解
May 06 #Javascript
3分钟读懂移动端rem使用方法(推荐)
May 06 #Javascript
Vue动态组件和异步组件原理详解
May 06 #Javascript
微信小程序按钮点击跳转页面详解
May 06 #Javascript
详解vue中移动端自适应方案
May 05 #Javascript
解决ie11 SCRIPT5011:不能执行已释放Script的代码问题
May 05 #Javascript
彻底揭秘keep-alive原理(小结)
May 05 #Javascript
You might like
PHP的分页功能
2007/03/21 PHP
PHP注释实例技巧
2008/10/03 PHP
php微信公众号开发(2)百度BAE搭建和数据库使用
2016/12/15 PHP
firefox中用javascript实现鼠标位置的定位
2007/06/17 Javascript
JavaScript Distilled 基础知识与函数
2010/04/07 Javascript
判断js中各种数据的类型方法之typeof与0bject.prototype.toString讲解
2013/11/07 Javascript
JS控制静态页面传递参数并获取参数应用
2016/08/10 Javascript
快速解决js开发下拉框中blur与click冲突
2016/10/10 Javascript
nodejs入门教程六:express模块用法示例
2017/04/24 NodeJs
在 Angular-cli 中使用 simple-mock 实现前端开发 API Mock 接口数据模拟功能的方法
2018/11/28 Javascript
全面了解JavaScript的作用域链
2019/04/03 Javascript
element form 校验数组每一项实例代码
2019/10/10 Javascript
使用vue cli4.x搭建vue项目的过程详解
2020/05/08 Javascript
node.js如何根据URL返回指定的图片详解
2020/10/21 Javascript
详解Vue3 Teleport 的实践及原理
2020/12/02 Vue.js
Python中itertools模块用法详解
2014/09/25 Python
github配置使用指南
2014/11/18 Python
python检测远程服务器tcp端口的方法
2015/03/14 Python
Python实现简单拆分PDF文件的方法
2015/07/30 Python
Python使用设计模式中的责任链模式与迭代器模式的示例
2016/03/02 Python
关于python pyqt5安装失败问题的解决方法
2017/08/08 Python
Python获取昨天、今天、明天开始、结束时间戳的方法
2018/06/01 Python
Python使用LDAP做用户认证的方法
2019/06/20 Python
python几种常用功能实现代码实例
2019/12/25 Python
浅谈如何使用python抓取网页中的动态数据实现
2020/08/17 Python
Web页面中八种创建多列等高(等高列布局)的实现技术
2012/12/24 HTML / CSS
GUESS盖尔斯法国官网:美国时尚品牌
2016/09/23 全球购物
汽车运用工程毕业生自荐信
2013/10/29 职场文书
总经理助理的八要求
2013/11/12 职场文书
俄罗斯商务邀请函
2014/01/26 职场文书
《跨越海峡的生命桥》教学反思
2014/02/24 职场文书
2015年超市工作总结
2015/04/09 职场文书
毕业酒会致辞
2015/07/29 职场文书
2016年保险公众宣传日活动总结
2016/04/05 职场文书
Feign调用全局异常处理解决方案
2021/06/24 Java/Android
Mysql数据库group by原理详解
2022/07/07 MySQL