w3h5

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

本来这篇笔记应该前天发的,上周我注册了一个微信小程序,周六根据官方教程和API写了一个简单的小程序。

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

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

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

首先是注册

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

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

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

下载 开发工具

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

安装成功后登陆:

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

选择 小程序项目:

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

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

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

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

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


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

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

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

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

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

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

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

"pages": [
    "pages/index/index",
    "pages/wxml/content",
    "pages/logs/logs"
  ]

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

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

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

上传发布:

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

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

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

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

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

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

首页自动跳转:

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

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

setTimeout(function () {
      wx.redirectTo({
        url: '../wxml/content',//跳转的页面
      })
    },2000)//等待时间


赞 (0)
分享到: +More |

评论 沙发

换个身份