小程序开发实战

1、注册小程序

注册账户：https://mp.weixin.qq.com/wxopen/waregister?action=step1

唯一需要：有一个邮箱即可。

2、下载开发工具

开发者工具下载页面

根据自己的系统，下载合适的开发工具

3、登陆到开发工具中

其中需要说明的是，APPid并不是苹果公司的APPLEID，也不是微信公众号的账号，而是小程序中给的APPid。

如果不方便填写，也可以是用测试号，可以调测使用。项目名称可以自己填写。

4、小程序开发

1）小程序的文件结构

小程序包含一个描述整体程序的 app 和多个描述各自页面的 page。

一个小程序主体部分由三个文件组成，必须放在项目的根目录，如下：

一个小程序页面由四个文件组成，分别是：

2）文件的实际目录展示

3）全局配置

app.json文件用来对微信小程序进行全局配置，决定页面文件的路径、窗口表现、设置网络超时时间、设置多 tab 等

{

"pages": [

  "pages/index/index",

  "pages/logs/index"

],

"window": {

  "navigationBarTitleText": "Demo"

},

"tabBar": {

  "list": [{

    "pagePath": "pages/index/index",

    "text": "概念"

  }, {

    "pagePath": "pages/logs/logs",

    "text": "工具"

  }]

},

"networkTimeout": {

  "request": 10000,

  "downloadFile": 10000

},

"debug": true

}

​

4）页面配置

每一个小程序页面也可以使用.json文件来对本页面的窗口表现进行配置。

页面的配置只能设置 app.json 中部分 window 配置项的内容，页面中配置项会覆盖 app.json 的 window 中相同的配置项。

<view class="index">

<view class="index-hd">

  <image class="index-logo" src="resources/kind/logo.png"></image>

  <view class="index-desc">以下为树哥区块链需要用到的各种区块链概念集合，仅作为大家参照使用。</view>

</view>

<view class="index-bd">

  <view class="kind-list">

    <block wx:for-items="{{list}}" wx:key="{{item.id}}">

      <view class="kind-list-item">

        <view id="{{item.id}}" class="kind-list-item-hd {{item.open ? 'kind-list-item-hd-show' : ''}}" bindtap="kindToggle">

          <view class="kind-list-text">{{item.name}}</view>

          <image class="kind-list-img" src="resources/kind/{{item.id}}.png"></image>

        </view>

        <view class="kind-list-item-bd {{item.open ? 'kind-list-item-bd-show' : ''}}">

          <view class="navigator-box {{item.open ? 'navigator-box-show' : ''}}">

            <block wx:for-items="{{item.pages}}" wx:for-item="page" wx:key="*item">

              <navigator url="pages/{{page}}/{{page}}" class="navigator">

                <view class="navigator-text">{{page}}</view>

                <view class="navigator-arrow"></view>

              </navigator>

            </block>

          </view>

        </view>

      </view>

    </block>

  </view>

</view>

</view>

5、编译预览

6、上传代码

同预览不同，上传代码是用于提交体验或者审核使用的。

点击开发者工具顶部操作栏的上传按钮，填写版本号以及项目备注，需要注意的是，这里版本号以及项目备注是为了方便管理员检查版本使用的，开发者可以根据自己的实际要求来填写这两个字段。

上传成功之后，登录小程序管理后台 - 开发管理 - 开发版本 就可以找到刚提交上传的版本了。

可以将这个版本设置 体验版 或者是 提交审核。

效果展示：

本页内容由塔灯网络科技有限公司通过网络收集编辑所得，所有资料仅供用户学习参考，本站不拥有所有权，如您认为本网页中由涉嫌抄袭的内容，请及时与我们联系，并提供相关证据，工作人员会在5工作日内联系您，一经查实，本站立刻删除侵权内容。本文链接:https://www.dengtar.com/13053.html