linux下开发微信小程序
<h1 class="postTitle"> </h1><div class="clear"> </div>
<div class="postBody">
<div id="cnblogs_post_body" class="blogpost-body">
<p align="center">微信小程序开发流程</p>
<p align="center"> </p>
<ol>
<li>有一个邮箱</li>
<li>用邮箱注册小程序账号并使用该账号获取微信小程序AppID</li>
<li>用注册的小程序账号登录微信公众平台(https://mp.weixin.qq.com)</li>
<li>完善小程序信息并且添加开发者(至少一个)</li>
<li>在微信web开发者工具上开发微信小程序</li>
<li>微信公众号与微信小程序绑定。</li>
<li>发布小程序代码</li>
<li>提交审核</li>
</ol>
<p>使用到的开发工具：微信web开发者工具</p>
<h4>一、<strong>在Linux环境下安装微信web开发者工具</strong></h4>
<p>步骤：</p>
<p class="pre">先安装 Wine</p>
<p class="pre">sudo apt-get install wine</p>
<p class="pre">查看版本</p>
<p class="pre">wine --version</p>
<p class="pre">版本信息如下：</p>
<p class="p">wine-3.0.1 (Debian 3.0.1-2)</p>
<p class="p">安装完记得配置</p>
<p class="pre">winecfg </p>
<p class="p">wcc 和 wcsc 编译错误(若没有任何错误信息可跳过)</p>
<p class="p">执行</p>
<p class="pre">sudo apt-get install wine-binfmt</p>
<p class="pre">sudo update-binfmts --import /usr/share/binfmts/wine</p>
<p class="p">1.下载开发者工具</p>
<p class="pre">git clone https:<em>//github.com/cytle/wechat_web_devtools.git</em></p>
<p class="p">2.进入目录</p>
<p class="pre">cd wechat_web_devtools</p>
<p class="p">3.自动下载最新 nw.js , 同时部署目录 ~/.config/微信web开发者工具/</p>
<p class="pre">./bin/wxdt install</p>
<h2><strong>运行</strong></h2>
<p class="pre">./bin/wxdt</p>
<p class="p">4.设置文件夹权限</p>
<p class="pre">sudo chmod -R 777 ~/.config/微信web 开发者工具/</p>
<h4>二、<strong>第一个小程序</strong></h4>
<ol>
<li>打开微信web开发者工具，点击新建项目选择小程序项目，项目目录：选择新建的项目的存储位置，appID：填入申请的appID(若没有，可以使用测试号)，最后填入项目名称。点击确定，新项目就创建好了。</li>
</ol>
<p> </p>
<ol>
<li>在开始编写之前，先了解一下最基本的东西：</li>
</ol>
<p>1) JSON 是一种数据格式，并不是编程语言，在小程序中，JSON扮演的静态配置的角色。</p>
<p> </p>
<p>2) WXML 全称是 WeiXin Markup Language，是小程序框架设计的一套标签语言，结合小程序的基础组件、事件系统，可以构建出页面的结构。</p>
<p> </p>
<p>3) WXSS（WeiXin Style Sheets）是一套用于小程序的样式语言，用于描述WXML的组件样式，也就是视觉上的效果。</p>
<p> </p>
<p>4) JavaScript是小程序的主要开发语言，开发者使用 JavaScript 来开发业务逻辑以及调用小程序的 API 来完成业务需求。</p>
<ol>
<li>开发步骤：</li>
</ol>
<p>1) 首先需要创建全局app所需的三个文件：app.js、app.json、app.wxss。</p>
<p>只能放在项目的根目录下，如下图：</p>
<p> </p>
<p>ps:app.json文件要配置入口页面(首页)，代码如下：</p>
<table border="1" cellspacing="0">
<tbody>
<tr>
<td valign="top" width="416">
<p>{</p>
<p>"pages":["pages/index/index"]</p>
<p>}</p>
</td>
</tr>
</tbody>
</table>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p>此处用的是相对路径，如果用绝对路径"/pages/about/about"就会报错。</p>
<p> </p>
<p>特别注意：.json文件里不能写注释，并且不能是个空文件，否则程序会报如下错误：</p>
<p> </p>
<p> </p>
<p> </p>
<p>2) 创建单页面index所需的文件夹：【通常一个页面的四个文件我们把它们放在一个目录中】</p>
<p>ps:通常我们用一个目录管理一个页面，而一个小程序往往有多个页面，这时我们就需要把这些页面的目录放在同一个目录中以方便管理。如下图：</p>
<p> </p>
<p>已上图为例：所有页面所需的文件夹都放在pages文件夹下，每个页面有4个文件又统一放在index文件夹下，若有多个页面，则需要创建多个与Index同级的文件夹，里面同样放置着该页面所需的.js、.json、.wxml、.wxss四个文件。</p>
<p>在第1)点我们说过，.json文件不能是个空文件，所以在此处的index.json文件中虽然没有什么内容要写，但是也不能空着。此处从简考虑，我们创建一个空对象即可，如下图：</p>
<p> </p>
<p> </p>
<p>同样，index.js文件也不能空着，否则程序也会报错。此处从简单考虑，我们就注册一个空对象即可：</p>
<p> </p>
<p> </p>
<p>3) 待以上工作完毕后，我们就可以编写第一个微信小程序了。</p>
<p>(输出一个hello world)。</p>
<p>打开index.wxml文件，添加如下代码：</p>
<p> </p>
<p>text标签用于输出文本</p>
<p>与html文件同理，我们可以给该标签添加样式</p>
<p>① 行内样式：</p>
<p> </p>
<p>② 类样式：</p>
<p>Idnex.wxml文件：</p>
<p> </p>
<p>Idnex.wxss文件：</p>
<p> </p>
<ol>
<li>项目预览</li>
</ol>
<p> </p>
<p>左侧的手机窗口即可查看到对应的效果</p>
</div>
</div>
</div>
<div id="MySignature" role="contentinfo">
时来天地皆同力，运去英雄不自由<br><br>
来源：https://www.cnblogs.com/gaoyuechen/p/13601638.html
頁:
[1]