微信组件开发

Lincy.Lin

一、 网页创建插件

1. 登录官网:https://cloud.smobiler.com/，选择插件开发并创建插件,

        

2. 控件信息填写

配置key等信息，请在基础信息中填写，ios需要配置此信息才能在分享消息后返回本应用。其中value为开发者在微信开放平台注册应用获取的AppID。

ps:注册微信开发平台应用https://open.weixin.qq.com/cgi-bin/applist?t=manage/list&lang=zh_CN&token=cd93d5e3c86bf640ad5a23635fa3a170fbe28d89

注意：微信开发平台注册的应用ios的Bundle ID和安卓版本的包名需和smobiler云平台应用包名一致

4. 进入功能定义板块，点击添加组件方法（一个组件可以创建多个方法）

Ps:方法名是用户自定义的

注意：1. 微信登录只是返回errorCode和code，具体用户数据需要根据code获取，参考：https://open.weixin.qq.com/cgi-bin/showdocument?action=dir_list&t=resource/res_list&verify=1&id=open1419317851&token=8a8c6b182e33b865f55a7f3b2d9821cb0267fe08&lang=zh_CN

2. 微信开放平台注册应用创建移动应用时，android中平台信息的应用签名为签名文件的MD5值，且字母小写，没有冒号。例如：q1w2e3r4t5y6u7i8o9p0q1w2e3r4t5y6

   Ps:md5获取在云平台应用-应用安卓打包中，如图：

5. 生成下载模版并在开发

注意：为了防止控件无法整合到app中，不要修改js文件的内容

a.移动端插件开发模板生成和下载

b.服务端插件开发模板生成

二、结合到react-native，用来帮助做开发调试

(1)、 windows

1. 从网上下载node.js的官方4.1版本或更高版本。

2. 建议设置npm镜像以加速后面的过程（或使用科学上网工具）。

npm config set registry https://registry.npm.taobao.org --global  

npm config set disturl https://npm.taobao.org/dist --global

3. 安装react-native命令行工具

npm install -g react-native-cli

(2)、 mac

1. 从网上下载node.js的官方4.1版本或更高版本。

2. 建议设置npm镜像以加速后面的过程（或使用科学上网工具）。

npm config set registry https://registry.npm.taobao.org --global  

npm config set disturl https://npm.taobao.org/dist --global

3. 安装react-native命令行工具

npm install -g yarn react-native-cli

4. 安装完yarn后同理也要设置镜像源：

yarn config set registry https://registry.npm.taobao.org --global

yarn config set disturl https://npm.taobao.org/dist --global

5. 如果你看到EACCES: permission denied这样的权限报错，那么请参照上文的homebrew译注，修复/usr/local目录的所有权：

sudo chown -R `whoami`/usr/local

(3)、 创建项目并添加组件

1. 创建并进入项目

react-native init WechatDemo

cd WechatDemo

2. 在WechatDemo下新建文件夹plugin，并在模版解压后放入文件夹plugin中

3. 在终端WechatDemo目录下输入命令

npm install --save plugin/M22_sm_weixin

react-native link react-native-sm-weixin

4. 用webstorm或Sublime Text打开WechatDemo，找到index.ios.js,修改代码,用xcode打开ios中项目文件进行调试

5. 用webstorm或Sublime Text打开SingtureDemo，找到index.android.js,修改代码同上,用Android Studio打开android项目文件进行调试

二、 ios和android平台开发

1. android手机端开发

注意：为了防止控件无法整合到app中，不要修改用于js交互的函数名

1. 将下载的模版解压，在android studi上打开其中的android文件夹

2. 参照微信开放平台资源中心接入文档开发

   参考：https://open.weixin.qq.com/cgi-b ... f3b2d9821cb0267fe08

3. 修改文件支持控件显示和js交互，具体请参考sm_weixin.zip中android文件夹

4. 微信组件中包含需要从微信返回应用的Activity，所以此需要放在包名目录下

注意：这是微信独有的特例，一般组件不考虑

5. 完成修改后可调试。

注意：调试时，微信开放平台中移动应用对应的包名和应用签名请参照xcode中的Bundle Identifier 和Android Studio中app的AndroidManifest.xml中的package，应用签名请参照http://blog.csdn.net/danfengw/article/details/53486446，MD5格式记得注意

2. ios手机端开发

注意：为了防止控件无法整合到app中，不要修改用于js交互的函数名

1. 用xcode打开ios文件夹中**.xcodeproj文件

2. 开发者需要在工程中链接上:SystemConfiguration.framework, libz.dylib, libsqlite3.0.dylib, libc++.dylib, Security.framework, CoreTelephony.framework, CFNetwork.framework

3. 修改文件支持控件显示和js交互，具体请参考sm_weixin.zip中ios文件夹

参照微信开放平台资源中心接入文档开发

   参考：https://open.weixin.qq.com/cgi-b ... 65f55a7f3b2d9821cb0

4.完成修改后可调试。

注意：调试时，微信开放平台中移动应用对应的包名和应用签名请参照xcode中的Bundle Identifier 和Android Studio中app的AndroidManifest.xml中的package，应用签名请参照http://blog.csdn.net/danfengw/article/details/53486446，MD5格式记得注意

四、完成开发后上传到网页

1. 找到WeixinDemo／node_modules／react-native-sm-weixin文件夹，将ios和android文件夹复制替换掉原来WeixinDemo／plugin／M22-sm-weixin中的ios和android文件夹。

注意：android文件夹中的build文件夹请删除，是运行调试需要的，上传并不需要，且会使压缩文件过大。

2. 把组件压缩成zip文件

注意：不要压缩最外层文件夹。

3. 获取的压缩文件上传到网页

4. 至此，组件的开发就完成了

五、服务端开发

1.将一 、5小点生成的服务端模板添加到项目中，并创建服务端创建组件，如图：

创建组件模板

注意：微信组件添加后重新生成项目才可在工具箱中找到微信组件

1.将微信组件添加到窗体，并进行应用注册，分享等

3.启动服务端项目

服务端代码：

ps:代码中微信组件方法和参数均可自定义，此代码仅供参考

六、云平台应用打包插件

1.应用打包步骤可查看（http://smobiler.com/yunapp.aspx），在应用打包时选择4x版本打包

2.在应用打包时进行插件添加再进行打包，并将安装包安装到手机上

3.手机客户端显示效果

a..微信应用注册

注意：每个设备要进行一次微信应用注册

b.分享好友效果显示

      

c.分享朋友圈

   

   是不是说SMO只能发送文字链接，那种带有小图标的文字链接能不能发呀？那种带图的链接实现起来是不是有难度？如果能支持带缩略图的链接就更好了

可以支持带缩略图的分享，具体可查看微信分享参数开发文档：http://www.smobiler.com/Help/htm ... eEntity__ctor_1.htm

上面的链接已经打不开了