前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >【笔记】微信小程序注册、发布流程及首页自动跳转

【笔记】微信小程序注册、发布流程及首页自动跳转

作者头像
德顺
发布2019-11-13 17:28:25
9600
发布2019-11-13 17:28:25
举报
文章被收录于专栏:前端资源前端资源
本来这篇笔记应该前天发的,上周我注册了一个微信小程序,周六根据官方教程和API写了一个简单的小程序。

为什么今天才发呢?周六下午一下班我们就赶紧去了车站,赶往泰安爬泰山,晚上开始爬,第二天上午下山,吃了饭又赶回济南,睡了一路,回家后洗了个澡倒头又睡着了。

非常感谢朋友的陪伴和款待,这已经是他第10次爬泰山了,光和我就怕了3次了。。。值得庆幸的是,这次我们排到了日出,真的很美!我的微博 @无码表情包 发的图片。

言归正传,今天这篇文章主要写一下我在做小程序遇到的一些问题,和一个小功能,我只写我认为有用的点,希望对大家有所帮助。

首先是注册

打开 注册页面 选择小程序,填写自己的信息进行注册。

注册成功后,首先要完善小程序信息

【笔记】微信小程序注册、发布流程及首页自动跳转 小程序 第1张
【笔记】微信小程序注册、发布流程及首页自动跳转 小程序 第1张

下载 开发工具

微信提供了普通和小游戏两种开发者工具。

安装成功后登陆:

【笔记】微信小程序注册、发布流程及首页自动跳转 小程序 第2张
【笔记】微信小程序注册、发布流程及首页自动跳转 小程序 第2张

选择 小程序项目:

【笔记】微信小程序注册、发布流程及首页自动跳转 小程序 第3张
【笔记】微信小程序注册、发布流程及首页自动跳转 小程序 第3张

选择项目目录,填写小程序AppID和名称:如果是导入已经写好的项目,现在目录后会自动填充 AppID和名称。

【笔记】微信小程序注册、发布流程及首页自动跳转 小程序 第4张
【笔记】微信小程序注册、发布流程及首页自动跳转 小程序 第4张

获取AppID:点击 设置 => 开发设置 => 开发者ID AppID(小程序ID)

【笔记】微信小程序注册、发布流程及首页自动跳转 小程序 第5张
【笔记】微信小程序注册、发布流程及首页自动跳转 小程序 第5张

创建项目后会自动生成必要的文件:

app.js 逻辑层,编写一些逻辑。

app.wxss 公用CSS文件,用于编写公共样式。

app.json 配置文件:用 { } 包裹

pages 页面配置,所有页面都需要再此配置,否则无法调用会报错。

右击 新建 Page 会自动生成 .js .wxml .wxss 三个文件,同时该页面会自动添加到 app.json 的 pages 配置中。

程序启动后会自动跳转到 第一行配置的页面 pages/index/index

代码语言:javascript
复制
"pages": [
    "pages/index/index",
    "pages/wxml/content",
    "pages/logs/logs"
  ]
【笔记】微信小程序注册、发布流程及首页自动跳转 小程序 第6张
【笔记】微信小程序注册、发布流程及首页自动跳转 小程序 第6张

window 设置默认页面的窗口表现:

代码语言:javascript
复制
"window": {
    "backgroundTextStyle": "light",//下拉 loading 的样式,仅支持 dark/light
    "navigationBarBackgroundColor": "#fff",//导航栏背景颜色
    "navigationBarTitleText": "i表情包",//导航栏标题文字内容
    "navigationBarTextStyle": "black"//导航栏标题颜色
  }

上传发布:

页面写好后 点击 上传 设置版本号和备注,点击上传。

【笔记】微信小程序注册、发布流程及首页自动跳转 小程序 第7张
【笔记】微信小程序注册、发布流程及首页自动跳转 小程序 第7张

然后在后台 开发管理 最下面 找到 开发版本,点击右侧的小三角 点击 选为体验版。

【笔记】微信小程序注册、发布流程及首页自动跳转 小程序 第8张
【笔记】微信小程序注册、发布流程及首页自动跳转 小程序 第8张

现在就可以扫描二维码进行测试了。

【笔记】微信小程序注册、发布流程及首页自动跳转 小程序 第9张
【笔记】微信小程序注册、发布流程及首页自动跳转 小程序 第9张

首页自动跳转:

我们可以写一个欢迎页,然后进行页面跳转,优化用户体验。

在 index.js 中的 onLoad: function () {} 内添加如下内容即可:

代码语言:javascript
复制
setTimeout(function () {
      wx.redirectTo({
        url: '../wxml/content',//跳转的页面
      })
    },2000)//等待时间
本文参与 腾讯云自媒体分享计划,分享自作者个人站点/博客。
原始发表:2018-05-02),如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体分享计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
相关产品与服务
云开发 CloudBase
云开发(Tencent CloudBase,TCB)是腾讯云提供的云原生一体化开发环境和工具平台,为200万+企业和开发者提供高可用、自动弹性扩缩的后端云服务,可用于云端一体化开发多种端应用(小程序、公众号、Web 应用等),避免了应用开发过程中繁琐的服务器搭建及运维,开发者可以专注于业务逻辑的实现,开发门槛更低,效率更高。
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档